Guest User

Message Box

a guest
Jul 28th, 2011
35
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- HTML -->
  2. <!-- #dialog is the id of a DIV defined in the code below -->
  3. <a href="#dialog" name="modal">Simple Modal Window</a>
  4.  
  5. <div id="boxes">
  6.  
  7.  
  8. <!-- #customize your modal window here -->
  9.  
  10. <div id="dialog" class="window">
  11. <b>Testing of Modal Window</b> |
  12.  
  13. <!-- close button is defined as close class -->
  14. <a href="#" class="close">Close it</a>
  15.  
  16. </div>
  17.  
  18.  
  19. <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
  20. <div id="mask"></div>
  21. </div>
  22.  
  23. <!-- CSS -->
  24. /* Z-index of #mask must lower than #boxes .window */
  25. #mask {
  26. position:absolute;
  27. z-index:9000;
  28. background-color:#000;
  29. display:none;
  30. }
  31.  
  32. #boxes .window {
  33. position:absolute;
  34. width:440px;
  35. height:200px;
  36. display:none;
  37. z-index:9999;
  38. padding:20px;
  39. }
  40.  
  41.  
  42. /* Customize your modal window here, you can add background image too */
  43. #boxes #dialog {
  44. width:375px;
  45. height:203px;
  46. }
  47.  
  48. <!-- jQuery -->
  49. $(document).ready(function() {
  50.  
  51. //select all the a tag with name equal to modal
  52. $('a[name=modal]').click(function(e) {
  53. //Cancel the link behavior
  54. e.preventDefault();
  55. //Get the A tag
  56. var id = $(this).attr('href');
  57.  
  58. //Get the screen height and width
  59. var maskHeight = $(document).height();
  60. var maskWidth = $(window).width();
  61.  
  62. //Set height and width to mask to fill up the whole screen
  63. $('#mask').css({'width':maskWidth,'height':maskHeight});
  64.  
  65. //transition effect
  66. $('#mask').fadeIn(1000);
  67. $('#mask').fadeTo("slow",0.8);
  68.  
  69. //Get the window height and width
  70. var winH = $(window).height();
  71. var winW = $(window).width();
  72.  
  73. //Set the popup window to center
  74. $(id).css('top', winH/2-$(id).height()/2);
  75. $(id).css('left', winW/2-$(id).width()/2);
  76.  
  77. //transition effect
  78. $(id).fadeIn(2000);
  79.  
  80. });
  81.  
  82. //if close button is clicked
  83. $('.window .close').click(function (e) {
  84. //Cancel the link behavior
  85. e.preventDefault();
  86. $('#mask, .window').hide();
  87. });
  88.  
  89. //if mask is clicked
  90. $('#mask').click(function () {
  91. $(this).hide();
  92. $('.window').hide();
  93. });
  94.  
  95. });
RAW Paste Data