Advertisement
marrkhoppus

Popup Box (not mine)

Jun 11th, 2013
43
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.68 KB | None | 0 0
  1. **Put the following code under your <head> tag**
  2.  
  3.  
  4.  
  5. <script type="text/javascript"
  6. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  7. <script>
  8. $(document).ready(function() {
  9. //
  10. $('a.poplight[href^=#]').click(function() {
  11. var popID = $(this).attr('rel'); //Get Popup Name
  12. var popURL = $(this).attr('href'); //Get Popup href to define size
  13. var query= popURL.split('?');
  14. var dim= query[1].split('&');
  15. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  16. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>');
  17. var popMargTop = ($('#' + popID).height() + 80) / 2;
  18. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  19. //Apply Margin to Popup
  20. $('#' + popID).css({
  21. 'margin-top' : -popMargTop,
  22. 'margin-left' : -popMargLeft
  23. });
  24. $('body').append('<div id="fade"></div>');
  25. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  26. return false;
  27. });
  28. $('a.close, #fade').live('click', function() {
  29. $('#fade , .popup_block').fadeOut(function() {
  30. $('#fade, a.close').remove(); //fade them both out
  31. });
  32. return false;
  33. });
  34. });
  35. </script>
  36.  
  37.  
  38.  
  39.  
  40. **Now paste this code under your <style type=โ€text/cssโ€>**
  41.  
  42.  
  43.  
  44.  
  45. #fade { /*--Transparent background layer--*/
  46. display: none; /*--hidden by default--*/
  47. background: #000;
  48. position: fixed; left: 0; top: 0;
  49. width: 100%; height: 100%;
  50. opacity: .80;
  51. z-index: 9999;
  52. }
  53. .popup_block{
  54. display: none; /*--hidden by default--*/
  55. background: #fff;
  56. padding: 20px;
  57. border: 20px solid #ddd;
  58. float: left;
  59. font-size: 1.2em;
  60. position: fixed;
  61. top: 50%; left: 50%;
  62. z-index: 99999;
  63. /*--CSS3 Box Shadows--*/
  64. -webkit-box-shadow: 0px 0px 20px #000;
  65. -moz-box-shadow: 0px 0px 20px #000;
  66. box-shadow: 0px 0px 20px #000;
  67. /*--CSS3 Rounded Corners--*/
  68. -webkit-border-radius: 10px;
  69. -moz-border-radius: 10px;
  70. border-radius: 10px;
  71. }
  72. img.btn_close {
  73. float: right;
  74. margin: -5px -5px 0 0;
  75. }
  76. /*--Making IE6 Understand Fixed Positioning--*/
  77. *html #fade {
  78. position: absolute;
  79. }
  80. *html .popup_block {
  81. position: absolute;
  82. }
  83.  
  84.  
  85.  
  86.  
  87. **Now paste this code under your </body> tag and fill it with the content that you want**
  88.  
  89.  
  90.  
  91.  
  92. <div id="02" class="popup_block">
  93.  
  94. <Center>YOUR CONTENT HERE
  95. </center></div>
  96.  
  97. </div></div></div></div></div></div></div></div></div></div>
  98.  
  99.  
  100.  
  101. **Now add the following code to wherever you want the link to your pop up box to be**
  102.  
  103.  
  104. <a href="#?w=500" rel="02" class="poplight">My Popup Box</a>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement