Wednesday, January 5, 2011

Jquery Tutorial : Working with Modal Windows

Let us try to understand how to get Modal windows using Jquery.
Let us divide the code into three parts - HTML, CSS and JavaScript.
The goal of this small utility is to :
  • Able to search the whole html document for A tag NAME="modal" attribute, so when users click on it, it will display the content of DIV #ID in the HREF attribute in Modal Window.
  • A mask that will fill the whole screen.
  • Modal windows that is simple and easy to modify.

1. HTML code 


1.     <!-- #dialog is the id of a DIV defined in the code below -->  
2.     <a href="#dialog" name="modal">Simple Modal Window</a>  
3.       
4.     <div id="boxes">  
5.       
6.           
7.         <!-- #customize your modal window here -->  
8.       
9.         <div id="dialog" class="window">  
10.          <b>Testing of Modal Window</b> |   
11.            
12.          <!-- close button is defined as close class -->  
13.          <a href="#" class="close">Close it</a>  
14.    
15.      </div>  
16.    
17.        
18.      <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->    
19.      <div id="mask"></div>  
20.  </div>  

2. CSS code

1.     <style>  
2.       
3.     /* Z-index of #mask must lower than #boxes .window */  
4.     #mask {  
5.       position:absolute;  
6.       z-index:9000;  
7.       background-color:#000;  
8.       display:none;  
9.     }  
10.      
11.  #boxes .window {  
12.    position:absolute;  
13.    width:440px;  
14.    height:200px;  
15.    display:none;  
16.    z-index:9999;  
17.    padding:20px;  
18.  }  
19.    
20.    
21.  /* Customize your modal window here, you can add background image too */  
22.  #boxes #dialog {  
23.    width:375px;   
24.    height:203px;  
25.  }  
26.  </style>  


--------- Refer to Java Script code in next page--------------------



3. Javascript

1.     <script>  
2.       
3.     $(document).ready(function() {    
4.       
5.         //select all the a tag with name equal to modal  
6.         $('a[name=modal]').click(function(e) {  
7.             //Cancel the link behavior  
8.             e.preventDefault();  
9.             //Get the A tag  
10.          var id = $(this).attr('href');  
11.        
12.          //Get the screen height and width  
13.          var maskHeight = $(document).height();  
14.          var maskWidth = $(window).width();  
15.        
16.          //Set height and width to mask to fill up the whole screen  
17.          $('#mask').css({'width':maskWidth,'height':maskHeight});  
18.            
19.          //transition effect       
20.          $('#mask').fadeIn(1000);      
21.          $('#mask').fadeTo("slow",0.8);    
22.        
23.          //Get the window height and width  
24.          var winH = $(window).height();  
25.          var winW = $(window).width();  
26.                  
27.          //Set the popup window to center  
28.          $(id).css('top',  winH/2-$(id).height()/2);  
29.          $(id).css('left', winW/2-$(id).width()/2);  
30.        
31.          //transition effect  
32.          $(id).fadeIn(2000);   
33.        
34.      });  
35.        
36.      //if close button is clicked  
37.      $('.window .close').click(function (e) {  
38.          //Cancel the link behavior  
39.          e.preventDefault();  
40.          $('#mask, .window').hide();  
41.      });       
42.        
43.      //if mask is clicked  
44.      $('#mask').click(function () {  
45.          $(this).hide();  
46.          $('.window').hide();  
47.      });           
48.        
49.  });  
50.    
51.  </script>  

4. Launch modal window with Javascript

Yes, you will able to load the modal window on page load as well :)

1.     $(document).ready(function () {  
2.       //id is the ID for the DIV you want to display it as modal window  
3.       launchWindow(id);   
4.     });  
And, if you want to close the modal window on key press, any keys you want, you can add the following function.

1.     $(document).keyup(function(e) {  
2.       if(e.keyCode == 13) {  
3.         $('#mask').hide();  
4.         $('.window').hide();  
5.       }  
6.     });  


No comments:

Post a Comment

subversion video