tezx

Pop up links/ask code #1

Aug 4th, 2012
3,325
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.68 KB | None | 0 0
  1. <script>
  2. $(document).ready(function() {
  3. //When you click on a link with class of poplight and the href starts with a #
  4. $('a.poplight[href^=#]').click(function() {
  5. var popID = $(this).attr('rel'); //Get Popup Name
  6. var popURL = $(this).attr('href'); //Get Popup href to define size
  7.  
  8. //Pull Query & Variables from href URL
  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.  
  13. //Fade in the Popup and add close button
  14. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tooltip-CloseButton.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  15.  
  16. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  17. var popMargTop = ($('#' + popID).height() + 80) / 2;
  18. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  19.  
  20. //Apply Margin to Popup
  21. $('#' + popID).css({
  22. 'margin-top' : -popMargTop,
  23. 'margin-left' : -popMargLeft
  24. });
  25.  
  26. //Fade in Background
  27. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  28. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  29.  
  30. return false;
  31. });
  32.  
  33. //Close Popups and Fade Layer
  34. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  35. $('#fade , .popup_block').fadeOut(function() {
  36. $('#fade, a.close').remove(); //fade them both out
  37. });
  38. return false;
  39. });
  40. });
  41. </script>
Advertisement
Add Comment
Please, Sign In to add comment