<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Pop up</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
body
{
font-family: verdana;
font-size: 15px;
}
a
{
color: #333;
text-decoration: none;
}
a:hover
{
color: #ccc;
text-decoration: none;
}
#mask
{
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}
#boxes .window
{
position: absolute;
left: 0;
top: 0;
width: 440px;
height: 200px;
display: none;
z-index: 9999;
padding: 20px;
}
#boxes #dialog
{
width: 375px;
height: 203px;
padding: 10px;
background-color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li><a href="#dialog" name="modal">Open Pop Up</a></li>
</ul>
<div id="boxes">
<div id="dialog" class="window">
<div style="text-align: right; font-weight: bold;">
<a href="#" class="close" />Close X</a>
</div>
Content Will goes here
</div>
<!-- Start of Login Dialog -->
<!-- End of Login Dialog -->
<!-- Start of Sticky Note -->
<!-- End of Sticky Note -->
<!-- Mask to cover the whole screen -->
<div id="mask">
</div>
</div>
</body>
</html>
<head>
<title>JQuery Pop up</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
body
{
font-family: verdana;
font-size: 15px;
}
a
{
color: #333;
text-decoration: none;
}
a:hover
{
color: #ccc;
text-decoration: none;
}
#mask
{
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}
#boxes .window
{
position: absolute;
left: 0;
top: 0;
width: 440px;
height: 200px;
display: none;
z-index: 9999;
padding: 20px;
}
#boxes #dialog
{
width: 375px;
height: 203px;
padding: 10px;
background-color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li><a href="#dialog" name="modal">Open Pop Up</a></li>
</ul>
<div id="boxes">
<div id="dialog" class="window">
<div style="text-align: right; font-weight: bold;">
<a href="#" class="close" />Close X</a>
</div>
Content Will goes here
</div>
<!-- Start of Login Dialog -->
<!-- End of Login Dialog -->
<!-- Start of Sticky Note -->
<!-- End of Sticky Note -->
<!-- Mask to cover the whole screen -->
<div id="mask">
</div>
</div>
</body>
</html>
11:04 PM |
Category: |
1 comments
Comments (1)
this is the jquery pop up