Hi Folks,
You can use below code for modal popup using jquery :
<!-- Below code can be used for popup -->
You can use below code for modal popup using jquery :
<!-- Below code can be used for popup -->
<script type="text/javascript">
var popupStatus = 1;
//loading popup with jQuery magic!
function loadPopup() {
//loads popup only if it is disabled
if (popupStatus == 0) {
$("#backgroundPopup").css({
"opacity" : "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup() {
//disables popup only if it is enabled
if (popupStatus == 1) {
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
//$('#message_box1').fadeIn("7000");
}
}
function centerPopup() {
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position" : "absolute",
});
//only need force for IE6
$("#backgroundPopup").css({
"height" : windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
//LOADING POPUP
//Click the button event!
//centering with css
centerPopup();
//load popup
loadPopup();
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function() {
disablePopup();
});
//Click out event!
//$("#backgroundPopup").click(function(){
//disablePopup();
//});
//Press Escape event!
$(document).keyup(function(e) {
if (popupStatus == 1) {
disablePopup();
}
});
});
</script>
<div id="popupContact"
style="position: absolute; margin-top: -1500px; margin-left: 360px;">
<h1>Looking for specific solutions! Post your query with
the mail-id given in this blog contact section</h1>
<p id="contactArea">
<a id="popupContactClose">x</a>
<!-- Put your code here -->
Jquery Rocks ...................................................................................
<!-- Put your code here -->
</p>
</div>
<div id="backgroundPopup"></div>
<style media="screen" type="text/css">
#backgroundPopup {
display: none;
position: fixed;
_position: absolute; /* hack for internet explorer 6*/
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
border: 1px solid #cecece;
z-index: 1;
}
#popupContact {
display: none;
position: fixed;
_position: absolute; /* hack for internet explorer 6*/
/*border:2px solid #cecece;
padding:12px;*/
font-size: 6px;
z-index: 2;
background: #FFFFFF;
height: 77px;
width: 302px;
}
#popupContactClose {
color: #1234BB;
/*cursor: pointer;*/
display: block;
font-size: 12px;
font-weight: bolder;
height: 0;
line-height: 0;
margin: -229px 0 0 288px;
position: absolute;
text-decoration: none;
}
#button {
text-align: center;
margin: 100px;
}
</style>
Posts
