Web developers often use modal features in websites as a part of their work. Yet lot of good modal plugins are available but if we want to create our own custom javascript plugin then what to do? .
When we are using multiple jquery plugins in our web page it is seen the jquery libraries are conflicting with each other, in that time we need costume plugins which will not conflict with jquery or dependent on jquery.I feel creating an javascript modal plugin is very simple to prevent the need of including another large javascript library to use jquery modal.

We need 3 things to develop the javascript modal.
1) Css
2) Javascript
3) Html

The css part of the modal

.jquerymodal {
    display: none;
    position: fixed;
    z-index: 1; 
    padding-top: 100px; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
    margin-left:auto;
    margin-right:auto;
    width: 50%; 
    height: 50%; 
    overflow: auto; 
   
}

.jquery-close {
    color: #000;
    float: right;
    font-size: 38px;
    font-weight: bold;
}

.jquery-modal-content {
    background-color: #f1f1f1;
   
    border: 1px solid #f1f1f1;
    width: 40%;
    margin: auto;
    padding: 15px;
}

The javascript Part of the modal

var jquerybtn = document.getElementById("jquerybtn");

var jquerymodal = document.getElementById('jquerymodal');

var jqueryspan = document.getElementsByClassName("jquery-close")[0];

jquerybtn .onclick = function() {
    jquerymodal.style.display = "block";
}

jqueryspan.onclick = function() {
    jquerymodal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        jquerymodal.style.display = "none";
    }
}

The html part

<button id=”jquerybtn”>Open Modal</button>
<div id=”jquerymodal” class=”jquerymodal”>
<!– Modal content –>
<div class=”jquery-modal-content”>

<div class=”modal-header”> <span class=”close”>&times;</span>

<h2>Modal Header</h2> 
</div>
<div class="modal-body">
<p>Jquery Modal </p>
</div>
 <div class="modal-footer"> <h3>Modal Footer</h3> </div>
</div>
 </div>

Leave comment

Your email address will not be published. Required fields are marked with *.