I am struggling with keeping the scrolling disabled when a popup div is visible in the center of the screen. I have attempted to use an overlay in the browser, but it doesn't seem to be working. Any suggestions on how to achieve this using jQuery and CSS?
Here is the code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Jquery popup</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
#popup
{
display: none;
width: 640px;
height: 480px;
overflow: auto;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin-left: -320px;
margin-top: -240px;
border: thin dashed #8f44ad;
padding-bottom: 20px;
background-color: #2d3e50;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 35px;
letter-spacing: 2px;
color: #FFFFFF;
}
.close
{
float: right;
color: #2a80b9;
cursor: pointer;
}
#overlay
{
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: fixed;
z-index: 1000;
background: #96a6a6;
}
#style {
background-color: #2d3e50;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 18px;
color: #FFF;
}
#main {
width: 600px;
height: 150px;
margin-top: 200px;
margin-left: 250px;
margin-right: auto;
padding: 30px;
border: thin dashed #FFF;
font-size: 25px;
color: #fff;
line-height: 35px;
letter-spacing: 2px;
padding-left: 250px;
}
#main input
{
width: 400px;
height: 50px;
border: 1px solid #FFF;
color: #FFF;
font-size: 20px;
line-height: 35px;
letter-spacing: 2px;
background-color: #16a086;
padding: 0px;
margin-left: 20px;
}
#main input:hover
{
background-color:#27ae61;
}
</style>
</head>
<body id="style">
<div id="popup">
<span class="close">×</span>
<br />
<br />
<div style=" width:600px float:left" align="center ">
Click on the button above to close this box
</div>
</div>
<div id="overlay"></div>
<div id="main">
<div style="width:600px;float:left">
<span>This is the basic view of the page</span>
</div>
<br />
<br />
<div style="width:600px;float:left">
<input type="submit" value="Click Here To view the popup" id="showpopup" />
</div>
</div>
<script type="text/ecmascript">
$(document).ready(function(){
$("input#showpopup").click(function(){
$("div#overlay").fadeIn('500');
$("div#popup").delay('800');
$("div#popup").fadeIn('500');
});
$(document).on('click', '.close', function(){
$("div#popup").fadeOut('500');
$("div#overlay").delay('500');
$("div#overlay").fadeOut('500');
});
});
</script>
</body>
</html>