Menu
I have a popup div which is present on the center of the screen and when the pop-up is visible the scrolling should be disable. How do I do that using jQuery and css. I already tried using an overlay over the browser. However this is not working.
This is my code
<!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>
562
If we know the top of the scroll location and add it to our CSS, then the body will not scroll back to the top of the screen, so problem solved. We can use JavaScript for this by calculating the scroll top, and add that value to the body styles: // When the modal is shown, we want a fixed body document.
When you open the popup, change the css overflow property to hidden like
$('body').css('overflow','hidden')
When you close it, change back to normal
$('body').css('overflow','auto')
Complete Code:
$(document).ready(function () {
$("input#showpopup").click(function () {
$("div#overlay").fadeIn('500');
$("div#popup").delay('800');
$("div#popup").fadeIn('500');
$('body').css('overflow', 'hidden'); //ADD THIS
});
$(document).on('click', '.close', function () {
$("div#popup").fadeOut('500');
$("div#overlay").delay('500');
$("div#overlay").fadeOut('500');
$('body').css('overflow', 'auto'); //ADD THIS
});
});
If I understand correctly, you want to disable full page scrolling, i.e the body.
Set overflow:hidden CSS attribute for <body> tag, when the popup is enabled and set it as auto when popup is disabled.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
