Making a simple popup with jquery

Hey this post today is just to give an example on how to make a simple pop up. I'll be using jquery as it really simplifies the coding.

An example of this code can be found-> here <- The requirements for this popup will be: Click on "Click here" will open an in-browser popup. The popup will be a div so that you can design it as you want :) After the popup is open any other click in the web-page will automaticly close the pop-up. (Oh yeah, and the popup will be transparent just for fun :) So this is easy, all it's needed is a hidden div and some CSS tags, The jquery takes care of the rest. The html would be this: (...)

< body >
< span class="clickme" > Hey! Click me for a popup < /span >
< span class="popup" >
< /div >
< /body >

So the idea here, is that you'll have a div, in this case, with the class popup. That is always present but it's invisible. The only reason why it has a class is for jquery to access it. In the CSS popup won't have any style associated with it.

So what we'll do is we'll add a class and text to that div using jquery functions:

• append() to append the text/HTML we wish that will appear on the div.

• addClass() to add another class to the div, this one however already will have a css associated.

So let's create the CSS for the popup, we'll name the class "show". Here is an example.

.show {
position: absolute;
color: #F4F5F6;
width: 600px;
margin-left: -300px;
height:300px;
background: #000000;
left:50%;
top:200px;
}

Now that we have everything set all we need to do is to create the javascript for it. Remember, we want to be able to click on anything to close the popup. Considering you already loaded the jquery.js

Let's start with making the popup show.

< script language="JavaScript" type="text/javascript" >
$(document).ready(function(){
$("span.clickme").click(function(event){
$("div.popup").addClass("show");
$("div.popup").append("Your text or HTML goes here. Note you can also save a variable and load it here.");
)};
)};

This will open the div as a popup. Now we need to close it. For doing so, we'll say that any click on the "body" will be a valid click for closing. And to avoid the popup getting killed the second it opens we'll create a simple state machine to handle the clicks. The full code is bellow.

< script language="JavaScript" type="text/javascript" >

var open = 0;

$(document).ready(function(){
$("span.clickme").click(function(event){
if(open==0)
{
$("div.popup").addClass("show"); < -- adds the class "show" to the popup so the css makes the div show as popup $("div.popup").append("< class="text">Your text or HTML goes here. All this inside a tag, in this case it's a span but you can use others. This tag will allow jquery to remove the text when the popup is closing. Note you can also save a variable and load it here.< /span>");
open=1;
}
});

$("body").click(function(event){
if(open==1)
{
open=2;
}
else if(open==2)
{
$("div.popup").removeClass("show");
$("span.text").remove(); < -- removes all in < class="">...< /span> including the tag itself
open=0;
}
});
});

< /script>

Ok i hope i've clarified it. Any comments or doubts, just leave a comment here and i'll do my best to improve the post :)