Advertisement
shotforthesky

Pop up box (click)

Nov 22nd, 2012
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.51 KB | None | 0 0
  1. AFTER <head> TAG:
  2. <script type="text/javascript"
  3. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  4. <script>
  5. $(document).ready(function() {
  6. //
  7. $('a.poplight[href^=#]').click(function() {
  8. var popID = $(this).attr('rel'); //Get Popup Name
  9. var popURL = $(this).attr('href'); //Get Popup href to define size
  10. var query= popURL.split('?');
  11. var dim= query[1].split('&');
  12. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  13. $('#' + 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>');
  14. var popMargTop = ($('#' + popID).height() + 80) / 2;
  15. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  16. //Apply Margin to Popup
  17. $('#' + popID).css({
  18. 'margin-top' : -popMargTop,
  19. 'margin-left' : -popMargLeft
  20. });
  21. $('body').append('<div id="fade"></div>');
  22. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  23. return false;
  24. });
  25. $('a.close, #fade').live('click', function() {
  26. $('#fade , .popup_block').fadeOut(function() {
  27. $('#fade, a.close').remove(); //fade them both out
  28. });
  29. return false;
  30. });
  31. });
  32. </script>
  33.  
  34. AFTER <style type="text/css"> TAG:
  35. #fade { /*--Transparent background layer--*/
  36. display: none; /*--hidden by default--*/
  37. background: #000;
  38. position: fixed; left: 0; top: 0;
  39. width: 100%; height: 100%;
  40. opacity: .80;
  41. z-index: 9999;
  42. }
  43. .popup_block{
  44. display: none; /*--hidden by default--*/
  45. background: #fff;
  46. padding: 20px;
  47. border: 20px solid #ddd;
  48. float: left;
  49. font-size: 1.2em;
  50. position: fixed;
  51. top: 50%; left: 50%;
  52. z-index: 99999;
  53. /*--CSS3 Box Shadows--*/
  54. -webkit-box-shadow: 0px 0px 20px #000;
  55. -moz-box-shadow: 0px 0px 20px #000;
  56. box-shadow: 0px 0px 20px #000;
  57. /*--CSS3 Rounded Corners--*/
  58. -webkit-border-radius: 10px;
  59. -moz-border-radius: 10px;
  60. border-radius: 10px;
  61. }
  62. img.btn_close {
  63. float: right;
  64. margin: -5px -5px 0 0;
  65. }
  66. /*--Making IE6 Understand Fixed Positioning--*/
  67. *html #fade {
  68. position: absolute;
  69. }
  70. *html .popup_block {
  71. position: absolute;
  72. }
  73.  
  74. LINKS:
  75. <a href="#?w=500" rel="02" class="poplight">TITLE</a>
  76. <a href="#?w=500" rel="03" class="poplight">TITLE 02</a>
  77. and so on....
  78.  
  79. AFTER </body> TAG (LINK 01):
  80. <div id="02" class="popup_block">
  81. TEXT HERE
  82. </div>
  83.  
  84. BEFORE </body> TAG (LINK 02 AND SO ON...):
  85. <div id="03" class="popup_block" style="height:200px;">
  86. TEXT HERE
  87. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement