Tutorials

Inline Modal Window w/ CSS and jQuery

Tags: Intermediate

There are many elegant and easy to install modal window (Popup) plugins out there, but there are times where the script interferes with some of the logic processed on the page. I recently had a situation where I was not able to use plugins like fancybox and prettyPhoto so I had to create my own modal window that pulled inline html within the page. Here is how I approached this situation:

HTML

We begin by adding a <a> tag with the following attributes:

• 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>

Next we set up the inline markup for the popup. This can be placed anywhere on the page, I set this towards the bottom of the content. Notice that the id of the popup matches the <a> tag’s rel attribute. This is what associates the link and popup together.

<div id="popup_name" class="popup_block">
    <h2>Turtle Power</h2>
    <p>I <3 Turtles.</p>
</div>

CSS

Take a look at the comments below for an explanation of the styles. Notice that we don’t specify the margin on the .popup_block in the CSS. Since the popups may vary in size, we will have jQuery calculate this for us in the next step.

#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;
}

Step 3. Setting up jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
	//Code goes here
});

Step 4. Activate Popup with jQuery

The following script contains comments explaining which jQuery actions are being performed.

//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;
});

References

• Getting the variable’s value from a link
• jQuery events not firing for dynamic content
• Explanation of .live()
• Explanation of .prepend()
• Explanation of .append()

Alternate Usage

• Trigger Popup on Page Load

Final Thought

For those jQuery masters, please let me know if there are ways to improve this code. I am all open ears and hungry to learn :-)

For those who have questions or concerns, feel free to let me know! If you would like to use images or flash videos in the popups, please use the elegant plugin solutions since this code is only meant for a light weight inline popup.