Zen-Dreams [dot] com » jQuery http://blog.zen-dreams.com/blog-en Blog's Archives Fri, 20 Aug 2010 07:25:25 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Creating a popup window with jQuery http://blog.zen-dreams.com/blog-en/2009/06/09/creating-a-popup-window-with-jquery/ http://blog.zen-dreams.com/blog-en/2009/06/09/creating-a-popup-window-with-jquery/#comments Tue, 09 Jun 2009 18:25:01 +0000 Anthony http://blog.zen-dreams.com/en/?p=602 I think it’s time for me to go back in more programming language posts rather than focusing only on WordPress. So here is the first post I’ll make on the fabulous jQuery engine.

The goal of this small tutorial will be to show you how to create popping windows in only a few lines of code.

First, the demo

//

Show popup

Close

This is the content test for this demo

1. Setup your environment

First, you have to grab the latest version of jQuery on their site.

Unzip it where you are going to use it and just add to your site’s header these lines in the <head> element :
<script src="js/jquery.js" type="text/javascript"></script>

Once you have done that, you must create within your page the placeholder for your content, to do that, just add these lines just before the </body> in your code.

<div id="popup" style="display: none;"></div>
<div id="window" style="display: none;">
<div id="popup_content"><a href="#" onclick="Close_Popup();">Close</a> </div>
</div>

These lines will create two divs not nested so that you can get transparency on the Popup layer and not on the Window Layer. If you put Window inside the Popup div, you will see that transparency will be inherited and that’s not what we want here.

2. The css

In this part we will define the way we want to display windows, you can use nested css or simply put them in a separate file.

#popup {
height: 100%;
width: 100%;
background: #000000;
position: absolute;
top: 0;
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
filter:alpha(opacity=75);
}

#window {
width: 600px;
height: 300px;
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
top: 200px;
left: 25%;
}

You will note that there are 4 lines to handle transparency, this is for compatibility purpose until all the browsers support the opacity property. If you don’t really care about IE, you can skip the filter line.

So what do we have here ?

We have a black background with 75% opacity that takes the whole page (if you don’t care about IE, I would suggest changing the position: absolute; to position: fixed;. Why ? So that it never whos any white space when scrolling down to the page.

Second definition is just to position the window itself.

Here what it looks like :popup

3. The jQuery code for the effects

Once you have prepared the html and css, you must have your popup ready to be displayed.

Usually, what I do is put some Ajax request in there but I won’t go into that today, But we are still going to create one function to dislpay the popup and one to close it. Just after the divs you created, add these lines :

<script type="text/javascript">
function Show_Popup(action, userid) {
$('#popup').fadeIn('fast');
$('#window').fadeIn('fast');
}
function Close_Popup() {
$('#popup').fadeOut('fast');
$('#window').fadeOut('fast');
}
</script>

And that’s it, you are nearly finished, now all you have to do is trigger these function when you click somewhere (maybe using a onClick=”Show_Popup()” event)

]]> http://blog.zen-dreams.com/blog-en/2009/06/09/creating-a-popup-window-with-jquery/feed/ 14