How to Create Pop-up in HTML with CSS using jQuery

In this article, we will show you how to create the pop-up in HTML using CSS and jQuery.

Step-1: Add HTML

<a href="javascript:void(0);" class="rules">Open Popup</a>
<div class="rules_popup_wrap" style="display: none;">
  <div class="rules_popup">
    <section class="widget_custom_html">
      <h2 class="popup-title">The Popup Example</h2>
    </section>
    <div class="rules_popup_close">×</div>
  </div>
</div>

Step-2: Add CSS

.rules_popup_wrap {
    background-color: rgba(0,0,0,.7);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999999999;
    transition: .15s ease-in-out;
    cursor: pointer;
    overflow-y: scroll;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-weight: 400;
    display: flex;
  justify-content: center;
  align-items: center;
}
.rules_popup {
  display: flex;
  justify-content: center;
  align-items: center;
    z-index: 1999999999;
    overflow: initial;
    transition: .15s ease-in-out;
    width: 60%;
    padding: 28px;
    border-radius: 5px;
    border: 1px none #000;
    box-shadow: 0px 10px 25px 4px rgb(2 2 2 / 50%);
    background-color: #fff;
    cursor: default;
    min-height: 400px;
    position: relative;
}
.rules_popup .popup-title {
    color: #000;
    text-align: center;
    text-shadow: 0px 0px 0px rgb(2 2 2 / 23%);
    font-weight: 700;
    font-size: 60px;
  line-height: 60px;
    position: relative;
    margin: 0;
}
.rules_popup_wrap .rules_popup_close {
  position: absolute;
  height: 28px;
  width: 28px;
  left: auto;
  right: 8px;
  bottom: auto;
  top: 8px;
  color: #fff;
  font-family: Times New Roman;
  font-weight: 100;
  font-size: 20px;
  border: 1px none #fff;
  border-radius: 42px;
  box-shadow: 0px 0px 0px 0px rgb(2 2 2 / 23%);
  text-shadow: 0px 0px 0px rgb(0 0 0 / 23%);
  background-color: rgba(6,117,192,1);
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rules {
  background-color: #000;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

Step-3: Add jQuery

jQuery( document ).ready( function(){
  jQuery('.rules').click(function(){
    jQuery('.rules_popup_wrap').show();
  });
  jQuery('.rules_popup_close').click(function(){
    jQuery('.rules_popup_wrap').hide();
  });
});

Output