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

this an example multiple modal create, just check it out.

function createModal(){
  var dataModal = "";
      var countModal = $(".modalWrap").length;
      if(typeof countModal === "undefined" || countModal == 0){
        countModal = 0;
      }
      /*this just an example, you can try improv it more like load file or url to fill your modal data.*/
      dataModal = '
 
This Modal '+(countModal+1)+'
 
';
      $('body').append(dataModal);
}

function closeModal(idModal){
$(idModal).remove();
}

.modalWrap{
width : 100%;
background : rgba(0,0,0,0.5);
min-height : 500px;
position : fixed;
top:0;
left:0;
}

.modalBody{
width : 60%;
min-height: 250px;
background : #fff;
margin-top : 10%;
}

you can use this if you want multiple modal create.