Thursday, 24 May 2012

Facebook like pop up window using jquery

This article is discussing pop up window using jquery or popup box using jquery.
Some of you are looking for a code for pop up window in html.     But jquery is the better solution to not only create simple pop up window but also more complicated popup windows.To
modal popup using jquery we use some essential css  too.

Try this :-

   <style type="text/css">
   border:8px solid #a1a1a1;
   padding:0px 0px;

<script type="text/javascript" src=""></script>
<script type="text/javascript">

$("#bodyid").append("<div id='divid'>"+
"<table width='100%'><tr><td id='headid'>Share this Photo</td></tr>"+
"<tr><td><br><img src='"+
"/uploads/2010/09/taj_mahal.jpg' width='60' height='50'>"+
"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspHere come the body of the message..."+
"<tr><td align='right'><input type='button' value='Share Photo' id='shareid'>"+
"<input type='button' value='Cancel' onclick='btn_cancel()'></td></tr>"+


<script type="text/javascript">
function btn_cancel()


<body id="bodyid">
   <div style='width:290px'>
<a id="linkid"><h3>Mouse over it to see popup window</h3></a>


Here is the sample screenshot :-

Here I am actully dynamically include a <div>  with id 'divid' when mouse is move over the text
'Mouse over it to see popup window'.  $("#bodyid").append("<div id='divid'>")   is
used to append the <div> to the body of html  page.

The contents in the pop up box is placed in this div. The css to this div is placed in the css section.
The border-radius property set  the <div> a rounded rectangle .
position:absolue set the pop up box exactly where the top and left is given even if some
elements are also present there.

The top and left positions are calculated just like this
"left":window.innerWidth/2-200 , "top":window.innerHeight/2-100.
window.innerWidth returns the width of browser window.Subtracting 200 from its half
gives the center position of window, because 400 is the predefined width of pop up box.
top position is also calculated just like this.

$("#divid").length returns the number of elements with the id 'divid'.if(!$("#divid").length)
is used to ensure the pop up box is not create when one is existing.

Finally $("#divid").remove() is used to permenently remove the newly added pop up box
from the dom.This is given in the onclick event of cancel button in the pop up box.

You can also read:-
Open a new browser window using javascript

Introducing AJAX with a simple example program 

Very simple Menu using Jquery Beginners Tutorial

No comments:

Post a Comment

Search This Blog