How to create modal box using html, css and jquery?

Question

How to create modal box using html, css and jquery?

Open Modal

Answer 1

For creating modal, you can also use some libraries.

One of them you can use w3css library

  

    Click Me to open modal

    

      

        

          ×
          
Some text. Some text. Some text.
          
Some text. Some text. Some text.
        
      
    
  

Using Jquery and given example by Leon

$(document).ready(function() {


  $("#myBtn").on("click", function() {
    $("#modalContainer").show();
  });

  $(".close").on("click", function() {
    $("#modalContainer").hide();
  });

});

#modalContainer {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

Click Me



  

    ×
    
Some text in the Modal..