This is the open popup code using jquery with appplying css .this is a very simple and attractive pop up window just applied on div.
$(document).ready(function () {
$('open').click(function () {
alert('hi');
load();
});
$('.close').click(function () {
unload();
});
});
function unload() { // TO Unload the Popupbox
$('.popup').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function load() { // To Load the Popupbox
$('.popup').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
style type="text/css"
.popup {
display: none; /* Hide the DIV */
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 325px;
width: 325px;
background: #FFFFFF;
left: 80px;
top: 100px;
z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#container {
width: 100%;
height: 100%;
}
a {
cursor: pointer;
text-decoration: none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
font-size: 20px;
line-height: 15px;
right: 5px;
top: 5px;
position: absolute;
color: #6fa5e2;
font-weight: 500;
}
/style
$(document).ready(function () {
$('open').click(function () {
alert('hi');
load();
});
$('.close').click(function () {
unload();
});
});
function unload() { // TO Unload the Popupbox
$('.popup').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function load() { // To Load the Popupbox
$('.popup').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
style type="text/css"
.popup {
display: none; /* Hide the DIV */
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 325px;
width: 325px;
background: #FFFFFF;
left: 80px;
top: 100px;
z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#container {
width: 100%;
height: 100%;
}
a {
cursor: pointer;
text-decoration: none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
font-size: 20px;
line-height: 15px;
right: 5px;
top: 5px;
position: absolute;
color: #6fa5e2;
font-weight: 500;
}
/style
No comments:
Post a Comment