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 :-
code
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
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 :-
code
<html>
<head>
<style type="text/css">
#divid
{
z-index:5;
position:absolute;
width:400px;
left:200px;
top:150px;
border:8px solid #a1a1a1;
padding:0px 0px;
background:#FFFFFD;
border-radius:15px;
}
#headid
{
background:#6692CD;
color:#ffffff;
font-size:18px;
}
#shareid
{
background-color:#6692CD;
color:#ffffff;
font-size:15px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#linkid").mouseenter(function(){
if(!$("#divid").length)
{
$("#bodyid").append("<div id='divid'>"+
"<table width='100%'><tr><td id='headid'>Share this Photo</td></tr>"+
"<tr><td><br><img src='http://mystifyingindia.com/blog/wp-content"+
"/uploads/2010/09/taj_mahal.jpg' width='60' height='50'>"+
"       Here come the body of the message..."+
"<br><br></td></tr>"+
"<tr><td align='right'><input type='button' value='Share Photo' id='shareid'>"+
"<input type='button' value='Cancel' onclick='btn_cancel()'></td></tr>"+
"</table></div>"
);
$("#divid").css({"left":window.innerWidth/2-200,"top":window.innerHeight/2-100});
}
});
}
);
</script>
<script type="text/javascript">
function btn_cancel()
{
$("#divid").remove();
}
</script>
</head>
<body id="bodyid">
<div style='width:290px'>
<a id="linkid"><h3>Mouse over it to see popup window</h3></a>
</div>
</body>
</html>
<head>
<style type="text/css">
#divid
{
z-index:5;
position:absolute;
width:400px;
left:200px;
top:150px;
border:8px solid #a1a1a1;
padding:0px 0px;
background:#FFFFFD;
border-radius:15px;
}
#headid
{
background:#6692CD;
color:#ffffff;
font-size:18px;
}
#shareid
{
background-color:#6692CD;
color:#ffffff;
font-size:15px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#linkid").mouseenter(function(){
if(!$("#divid").length)
{
$("#bodyid").append("<div id='divid'>"+
"<table width='100%'><tr><td id='headid'>Share this Photo</td></tr>"+
"<tr><td><br><img src='http://mystifyingindia.com/blog/wp-content"+
"/uploads/2010/09/taj_mahal.jpg' width='60' height='50'>"+
"       Here come the body of the message..."+
"<br><br></td></tr>"+
"<tr><td align='right'><input type='button' value='Share Photo' id='shareid'>"+
"<input type='button' value='Cancel' onclick='btn_cancel()'></td></tr>"+
"</table></div>"
);
$("#divid").css({"left":window.innerWidth/2-200,"top":window.innerHeight/2-100});
}
});
}
);
</script>
<script type="text/javascript">
function btn_cancel()
{
$("#divid").remove();
}
</script>
</head>
<body id="bodyid">
<div style='width:290px'>
<a id="linkid"><h3>Mouse over it to see popup window</h3></a>
</div>
</body>
</html>
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
No comments:
Post a Comment