Submitted by newaction on Tue, 2011-10-25 09:44
Sample
Sample, click here to see popupThis div will popup
I am the DIV that will popup.
To create one like me
href - #?w=500 specifies the width of the popup
rel – Set a unique rel for this Popup
class="poplight" – Class needed to trigger popup
<a href="#?w=500" rel="popup_name" class="poplight">Learn More</a> <div id="popup_name" class="popup_block"> <h2>This div will popup</h2> <p>I am the DIV that will popup.</p> <p>To create one like me</p> <p>href - #?w=500 specifies the width of the popup</p> <p>rel – Set a unique rel for this Popup</p> <p>class="poplight" – Class needed to trigger popup</p> </div> <a href="#?w=500" rel="popup_name" class="poplight">Learn More</a> <div id="popup_name" class="popup_block"> <h2>This div will popup</h2> <p>I am the DIV that will popup.</p> <p>To create one like me</p> <p>href - #?w=500 specifies the width of the popup</p> <p>rel – Set a unique rel for this Popup</p> <p>class="poplight" – Class needed to trigger popup</p> </div> <style> #fade { /*--Transparent background layer--*/ display: none; /*--hidden by default--*/ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block{ display: none; /*--hidden by default--*/ background: #fff; padding: 20px; border: 20px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; /*--CSS3 Box Shadows--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 Rounded Corners--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; } </style> <script> $(document).ready(function() { //Code goes here //When you click on a link with class of poplight and the href starts with a # $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Get Popup Name var popURL = $(this).attr('href'); //Get Popup href to define size //Pull Query & Variables from href URL var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //Gets the first query string value //Fade in the Popup and add close button $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>'); //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 var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; //Apply Margin to Popup $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); //Fade in Background $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. $('#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 return false; }); //Close Popups and Fade Layer $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //fade them both out }); return false; }); }); </script>
Reference
http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/http://www.sohtanaka.com/web-design/examples/modal-window/
- Login to post comments