Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.


Jquery, javascript Training

Jquery training blog

How to make custom modal pop up using javascript and css

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);
    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() { = "block";

jqueryspan.onclick = function() { = "none";

window.onclick = function(event) {
    if ( == modal) { = "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 class="modal-body">
<p>Jquery Modal </p>
 <div class="modal-footer"> <h3>Modal Footer</h3> </div>
Please follow and like us:

Got Something To Say:

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


About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts