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 :
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. }
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