Create a Simple jQuery Modal Window

In today’s tutorial we’re going to take a look at how to create a simple jquery modal window. In a previous tutorial I’ve shown you how to create a pure css modal window, in this tutorial we’re going to use the same concept, but instead of using CSS to show the show the modal window, we’ll use jQuery.

[tutorial_details]

To get started, let’s create the basic HTML markup of the modal window and the opening link:

<!-- #modal is the id of a DIV defined in the code below -->
<a href="#modal" name="modal">Simple Modal Window</a>

<!-- #customize your modal window here -->
<div id="modal" class="modalwindow">

    <!-- Modal window Title -->
    <h2>Simple jQuery Modal Window</h2>

    <!-- close button is defined as close class -->
    <a href="#" class="close">X</a>

    <div class="content">
        <!-- Modal Window Content -->
    </div>

</div>

In the code above, we created an anchor tag, or link that will open the popup window. then we created the actual modal window itself.

Note that the destination of the <a> tag needs to exactly match the ID of your modal window. In our case, you can see the link links to #modal and the ID of the modal window is also modal.

The next step is to add some styling to our modal window:

.modalwindow {
    position:fixed;
    display:none; /* Hides the modal window by default */
    z-index:9999;
    width:500px;
    background: #FF5722;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}

h2 {
    background-color: #E64A19;
    padding: 15px;
    font-size: 25px;
    color: #000;
    margin: 0;
    font-family: arial;
    text-align: center;
}

.content {
    padding: 20px;
    color: #fff;
    font-size: 22px;
    line-height: 30px;
}

.close {
    float: right;
    margin-top: -47px;
    margin-right: 15px;
    width: 17px;
    height: 17px;
    display: block;
    padding: 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-family: arial;
}

And now, all that is left is to add the jQuery to make the modal window appear when we click the link, and position it in the middle of the screen:

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {

    //Cancel the link behavior
    e.preventDefault();
    //Get the A tag
    var id = $(this).attr('href');

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    id.css('top', winH/2-id.height()/2);
    id.css('left', winW/2-id.width()/2);

    //transition effect
    id.fadeIn(500);

});

//if close button is clicked
$('.modalwindow .close').click(function (e) {

    //Cancel the link behavior
    e.preventDefault();

    $('.modalwindow').fadeOut(500);
});

First we select all the anchor tags with the name of “modal“, then we extract the href link from it. After that we get the screen’s width and height to be able to position the popup in the middle.

And of course you need to have the jQuery libary included in your project otherwise this will not work.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

At this point, you’re done and your simple jquery modal window should work just fine. If you have any questions, problems or suggestions, feel free to leave a comment down below.

Setting Cookies

If you don’t want the popup to show each time the page is loaded, we need to use something called cookies. I’m not going to explain how these work in this article, but i HIGHLY recommend that you read this awesome guide about javascript cookies.

Althou I’ll explain how can you combine the functions in the above mentioned guide with out script to make it work.

To do this, let’s make a new file, called popup.js this file will hold all our js and jQuery code. First we’ll add the createCookie(), readCookie() and eraseCookie() functions from the js cookie guide.

Here are the functions incase you haven’t read the guide. ( Which you should totally do. )

function createCookie(name,value,days) {

    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {

    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

Then, we’re going to modify our jQuery code, and make it into a function, called myPopup();

function myPopup() {
    //Get the A tag
    var id = $('#modal');

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    id.css('top', winH/2-id.height()/2);
    id.css('left', winW/2-id.width()/2);

    //transition effect
    id.fadeIn(500);
}

As you can see, we removed the .click() function, since the popup will no be controlled from outside the function. We also removed the e.preventDefault() hence we won’t use a link to call upon the modal window.

After we have this 4 functions in our new popup.js we need to add a the last part of our jQuery, which will close the popup when we click the close button.

//if close button is clicked
$('.modalwindow .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    $('.modalwindow').fadeOut(500);
});

Okay, now that we have everything in place, let’s play with the functions and make our popup to only show up every 7 days. To do this,

First, we create a var called popup which reads the cookie named popup.

// reading the 'popup' cookie
var popup = readCookie('popup');

Then we create an if else statement to check if the cookie exists or not. If it does, we do nothing. If it doesn’t we enter the loop, create the cookie for 7 days and show our popup window.

// Checking if it exists or not
if ( popup != 'hide' ) {

    // if doesn't exist, we create it for 7 days
    createCookie('popup','hide','7');

    // we show the popup.
    myPopup();

} // if the cookie exits, nothing will happen.

And that’s it! We have a simply cookie system implemented. Also, you can remove the following from our HTML code since we don’t need it if we use cookies.

<!-- #modal is the id of a DIV defined in the code below -->
<a href="#modal" name="modal">Simple Modal Window</a>

For a better understanding of how cookies work, please refer to the guide/tutorial mentioned above in the article! If you have any questions related to this, feel free to leave a comment down below!