Advertisement
thepinkrebellion

thecodesclub popup box

Feb 21st, 2013
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.31 KB | None | 0 0
  1. <script type="text/javascript"
  2. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  3. <script>
  4. $(document).ready(function() {
  5. //
  6. $('a.poplight[href^=#]').click(function() {
  7. var popID = $(this).attr('rel'); //Get Popup Name
  8. var popURL = $(this).attr('href'); //Get Popup href to define size
  9. var query= popURL.split('?');
  10. var dim= query[1].split('&');
  11. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  12. $('#' + 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>');
  13. var popMargTop = ($('#' + popID).height() + 80) / 2;
  14. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  15. //Apply Margin to Popup
  16. $('#' + popID).css({
  17. 'margin-top' : -popMargTop,
  18. 'margin-left' : -popMargLeft
  19. });
  20. $('body').append('<div id="fade"></div>');
  21. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  22. return false;
  23. });
  24. $('a.close, #fade').live('click', function() {
  25. $('#fade , .popup_block').fadeOut(function() {
  26. $('#fade, a.close').remove(); //fade them both out
  27. });
  28. return false;
  29. });
  30. });
  31. </script>
  32.  
  33. <link href='http://static.tumblr.com/quvev8c/im6milsj5/thecodesclubskewandgrow.css' rel='stylesheet' type='text/css'>
  34.  
  35. <style>
  36. #fade { /*--Transparent background layer--*/
  37. display: none; /*--hidden by default--*/
  38. background: #000;
  39. position: fixed; left: 0; top: 0;
  40. width: 100%; height: 100%;
  41. opacity: .80;
  42. z-index: 9999;
  43. }
  44. .popup_block{
  45. -webkit-animation: thecodesclub 2s;
  46. -moz-animation: thecodesclub 2s;
  47. -ms-animation: thecodesclub 2s;
  48. display: none; /*--hidden by default--*/
  49. background: #fff;
  50. padding: 20px;
  51. border: 1px solid #000;
  52. float: left;
  53. font-size: 1.2em;
  54. position: fixed;
  55. top: 50%; left: 50%;
  56. z-index: 99999;
  57. /*--CSS3 Box Shadows--*/
  58. -webkit-box-shadow: 0px 0px 20px #000;
  59. -moz-box-shadow: 0px 0px 20px #000;
  60. box-shadow: 0px 0px 20px #000;
  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. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement