Français
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
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 :
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)
hello , i have used this code . popup is appearin g, but there is no close button . what to do ?
Yes, I forgot to mention the close button. I will update the post accordingly :)
this isn’t working, i’ve got jquery 1.3.2
More details on the problem would be greatly appreciated
Hey anthony,
is there a way to make this dynamic for wordpress? say i have a post and i want to make a link from within this post popping up an image and some text… is this possible? what would be the actual calls to the jquery engine?
Works great in the latest jQuery.
Nice one mate! cheers :)
I’ve been meaning to work out how to do this for ages and have also wanted to break the ice on using JQuery so to do both at the same time was a real double whammy :)
Thanks very much indeed, very nice clear instructions
thanks
i was using jquery 1.2.6 and it worked just fine for me btw
You can remove all the opacity stuff in the CSS and let jQuery handle it for you, by replacing the first line of Show_Popup() with this one:
$(‘#popup’).css(‘opacity’,0.75).fadeIn(‘fast’);
You’re using jQuery anyway, so letting it handle the X-browser stuff makes sense.
How to you get it to not load right away when the page loads. I need it to only function when a user clicks on a link?
With the code I provided, it will not load right away but only when the function Show_Popup is called
A demo would be nice.
Yes, I will try to include a demo for this.
Anna, I included a demo on top of the page so that you can see how it looks like now.