irwan

jQuery - Modal Window

Nov 1st, 2011
134
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.42 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.  
  6. <head>
  7. <title>Hello!</title>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  9. </head>
  10. <script type="text/javascript">
  11. $(document).ready(function() {
  12. //select all the a tag with name equal to modal
  13. $('a[name=modal]').click(function(e) {
  14. //Cancel the link behavior
  15. e.preventDefault();
  16. //Get the A tag
  17. var id = $(this).attr('href');
  18.  
  19. //Get the screen height and width
  20. var maskHeight = $(document).height();
  21. var maskWidth = $(window).width();
  22.  
  23. //Set height and width to mask to fill up the whole screen
  24. $('#mask').css({'width':maskWidth,'height':maskHeight});
  25.  
  26. //transition effect
  27. $('#mask').fadeIn(1000);
  28. $('#mask').fadeTo("slow",0.8);
  29.  
  30. //Get the window height and width
  31. var winH = $(window).height();
  32. var winW = $(window).width();
  33.  
  34. //Set the popup window to center
  35. $(id).css('top', winH/2-$(id).height()/2);
  36. $(id).css('left', winW/2-$(id).width()/2);
  37.  
  38. //transition effect
  39. $(id).fadeIn(2000);
  40.  
  41. });
  42.  
  43. //if close button is clicked
  44. $('.window .close').click(function (e) {
  45. //Cancel the link behavior
  46. e.preventDefault();
  47. $('#mask, .window').hide();
  48. });
  49.  
  50. //if mask is clicked
  51. $('#mask').click(function () {
  52. $(this).hide();
  53. $('.window').hide();
  54. });
  55.  
  56. });
  57. </script>
  58. <style>
  59. #mask {
  60. position:absolute;
  61. z-index:8000;
  62. background-color:#f2f2f2;
  63. display:none;
  64. }
  65. #boxes .window {
  66. position:absolute;
  67. width:440px;
  68. height:200px;
  69. display:none;
  70. z-index:9999;
  71. padding:20px;
  72. }
  73. #boxes #dialog {
  74. width:375px;
  75. height:203px;
  76. background:#fff;
  77. }
  78. </style>
  79.  
  80. <body>
  81.  
  82. <!-- #dialog is the id of a DIV defined in the code below -->
  83. <a href="#dialog" name="modal">Click Me</a>
  84. <div id="boxes">
  85. <div id="dialog" class="window">
  86. <b>MODAL WINDOW</b> -><a href="#" class="close">Close it</a>
  87. </div>
  88. <div id="mask"></div>
  89. </div>
  90.  
  91. <div class="text">
  92.  
  93. <h1> Test </h1> <p>
  94.  
  95. <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/188050_169149283138446_2377278_n.jpg" alt="alt" />
  96.  
  97. </div>
  98.  
  99.  
  100. </body>
  101.  
  102. </html>
  103.  
Advertisement
Add Comment
Please, Sign In to add comment