How to create custom popup | Lightning Popup | Using HTML/CSS and Javascript

Modal popup or Popup window is one of useful and quick way to take the input from user or show information to the user. Popup basically display top of the current page. In every web technology popup play very important role. There are alot of way to acheive popup functioanlity with the help of 3rd Party tools such as: Bootstrap, JQuery etc. But sometime we don't want to use those tool and still want to implement popup functionality. Today I'm sharing my knowledge "How to create popup" with the help of standard HTML/CSS and Javascript without 3rd party tool. After completing this, Our Modal popup would look below image.

1. HTML : Below is the html code which can be put inside any page, normal HTML page or Salesforce VF Page.

<div id="dvOkayModal" style="display: none;z-index: 99999">

  <div class="popup-overlay popup-flex-display">

    <div class="popup-container">

      <div class="popup-title">Information</div>

      <div class="popup-body pad10">

        <p>Popup basically display top of the current page. In every web technology popup play very important role. There are alot of way to acheive popup functioanlity with the help of 3rd Party tools such as: Bootstrap, JQuery etc.</p>

      </div>

      <div class="popup-footer">

        <button class="popup-ok-button" onclick="showPopup('none');">Ok.</button>

      </div>

    </div>

  </div>

</div>

2. Javascript Code:

     function showPopup(display){
       document.getElementById("dvOkayModal").style.display = display;
     }

3. CSS Code:

   .popup-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        top: 0;
        left: 0;
   }
   .popup-flex-display {
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .popup-container {
       width: 500;
       background: #FFFFFF;
       overflow: hidden;
       border-radius: 5px;
   }
   .popup-title {
       text-align: center;
       padding: 15px;
       background: #FEFBF9;
       font-size: large;
       border-bottom: 2px solid #e9e9e9;
   }
   .popup-footer {
      text-align: center;
      padding: 10px;
      background: #F9F9FB;
      font-size: large;
      border-top: 2px solid #e9e9e9;
      display: flex;
      justify-content: flex-end;
   }
  .pad10 {
      padding: 10px;
  }
  .popup-content {

  }
  .popup-ok-button {
     border: 0px solid;
     height: 34px;
     width: 60px;
     background-color: rgb(0, 112, 210);
     color: white;
  }
  p{
     text-align: justify;
     margin-top: 0px;
  }

Feel free to reachout to me if you face any issue or challange.

Thanks viewer for taking your time to reading this aritcle. Please comment if you find this article helpful.

Regards
Maksud