Advertisement
danateruel

Pop up links Code (Part 1)

Sep 18th, 2012
43
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.74 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.  
  4. <script>
  5. $(document).ready(function() {
  6. //When you click on a link with class of poplight and the href starts with a #
  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.  
  11. //Pull Query & Variables from href URL
  12. var query= popURL.split('?');
  13. var dim= query[1].split('&');
  14. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  15.  
  16. //Fade in the Popup and add close button
  17. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="CLOSE BUTTON IMG URL" class="btn_close" title="Close Window" alt="Close" /></a>');
  18.  
  19. //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
  20. var popMargTop = ($('#' + popID).height() + 80) / 2;
  21. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  22.  
  23. //Apply Margin to Popup
  24. $('#' + popID).css({
  25. 'margin-top' : -popMargTop,
  26. 'margin-left' : -popMargLeft
  27. });
  28.  
  29. //Fade in Background
  30. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  31. $('#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
  32.  
  33. return false;
  34. });
  35.  
  36. //Close Popups and Fade Layer
  37. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  38. $('#fade , .popup_block').fadeOut(function() {
  39. $('#fade, a.close').remove(); //fade them both out
  40. });
  41. return false;
  42. });
  43. });
  44. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement