Galactic Civilizations 3
Create a modal window in JavaScript with JQuery

Create a modal window in JavaScript with JQuery

Category: Javascript.
Posted by on the 13/03/2014.
Last update on the 14/03/2014.

Description

This tutorial explains how to create a modal window in JavaScript with JQuery.

Introduction

This tutorial can be realized with a simple text editor like « Notepad ». This tutorial requires some basic knowledge in html and JavaScript.
It requires also the JQuery library.

The page

First of all, we will create a file named: tutorielsenfolie.html.
This file will contain a link that will create a modal window in JavaScript.

tutorielsenfolie.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" >
<head>
   <head>
      <title></title>

      <!-- We import the JQuery library -->
      <script src="JQuery-1.10.1.min.js" type="text/javascript"></script>
      <link
rel="stylesheet" href="style.css" type="text/css" title="Default"/>
   </head>
   <body>
      <div
id="fog"></div>
      <a
href="#" id="show">Display modal window</a>
      <script
src="modal.js" type="text/javascript"></script>
      <div
id="modal" class="popup"></div>
   </body>
</html>

NB: We consider that the JQuery library (JQuery-1.10.1.min.js) is in the same folder as the file « tutorielsenfolie.html ».

Style sheet

We will now create the style sheet allowing to beautify our modal window and also to move it outside the screen.
Create a file named style.css and write the following lines:

style.css

#fog {
   position:absolute;
   z-index:9000;
   background-color:#000;
   display:none;
   border-radius: 10px;
}

.popup {
   position:fixed;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;
   border-radius: 10px;
   background-color: white;
   border: 1px solid grey;
}

#modal {
   width:300px;
   height:200px;
}

The attributes z-index and display:none allow to hide the modal window and the black fog that will be placed behind.

JavaScript Script

We will now develop our script that allows to create and to hide the modal window. Our code will be composed of 3 functions:

  • showModal : allows to display the modal window;
  • hideModal : allows to hide the modal window;
  • resizeModal : allows to resize the modal window and the black fog when the user change the browser's size;

The name of the file where we will write the script that allows hiding and displaying a modal window is « modal.js ».

Creation of the modal window

First of all, we need to change the behaviour of the link « Display modal window » in order to execute the function « showModal » when we click on it.
To do that, write the following lines:

modal.js

$(document).ready(function() {
   
   // When we click on show the modal window is displayed
   $('#show').click(function (e) {
       // We deactivate the default behaviour of the link
        e.preventDefault();
      showModal();
   });
   
   // When we click on the black fog, the modal window is hidden
   $('#fog').click(function () {
      hideModal();
    });
   
   // When we change the size of the browser, the size of the fog change
   $(window).resize(function () {
      resizeModal()
   });
   
});

As you can see above, we changed the behaviour of three actions:

  • When you click on the link « Show modal window », the modal window is displayed;
  • When you click on the black fog, the modal window is hidden;
  • When you change the size of the browser, it also change the size of the modal window;

Here is the code that displays the modal window:

modal.js

function showModal(){
   var id = '#modal';
   $(id).html('Here is the modal window<br/><a href="#" class="close">Close the window</a>');
   
   // We define the size of the modal window
   resizeModal();
   
   // Transition effect     
   $('#fog').fadeIn(1000);   
   $('#fog').fadeTo("slow",0.8);
   // Transition effect   
   $(id).fadeIn(2000);
   
   $('.popup .close').click(function (e) {
      // We deactivate the default behaviour of the link
      e.preventDefault();
      // We hide the modal window
      hideModal();
    });
}

Deletion of the modal window

As you may have noticed in the preceding code, the modal window will contain a link that allows closing it.
To close the modal window, add the following lines to the file « modal.js »:

modal.js

function hideModal(){
   // We hide the black fog and the modal window
   $('#fog, .popup').hide();
   $('.popup').html('');
}

As you can see, this code is very simple. It deletes the content of the modal window and makes it disappear.

Changing the size of the modal window

Now we will develop the method to change the size of the modal window. To do this, we will use the screen size.
Here are the lines to add to change the size of the modal window:

modal.js

function resizeModal(){
   var modal = $('#modal');
   // We catch the height and the width of the page in order to cover all the screen
   var winH = $(document).height();
   var winW = $(window).width();
   
   // the fog will have the size of the screen
   $('#fog').css({'width':winW,'height':winH});
   
   // We catch the height and the width of the screen
   var winH = $(window).height();
   // The modal window will be placed at the middle of the screen
   modal.css('top', winH/2 - modal.height()/2);
   modal.css('left', winW/2 - modal.width()/2);
}

Using cookies

To complete this tutorial, I'll explain how to use cookies to display the modal window for new users.
To this we must add the following code in the bloc « $(document).ready(function() »:

modal.js

$(document).ready(function() {
   ...
    // If the cookie "alreadyDisplayed" doesn't exist, we display the modal window
    if (!readCookie('alreadyDisplayed')) {
        showModal();      
        // Then, we create the cookie "alreadyDisplayed" in order to display the modal window only once.
        createCookie('alreadyDisplayed', 1, 365);
    }
   ...
});
...

Affichage de la fenêtre modale

You like this tutorial ?
Like this website in order to promote it on facebook !

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo