how to prevent javascript div popup from jumping back to the top of the page?
Question
I have the following neat code that opens a small popup box when the link is clicked ...the problem is that I use it on a very long page with lots of content, and whenever someone opens the popup, the actual content page jumps back to the very top, which is annoying if someone just spent a while scrolling down. How can I force the page to stay there even though the popup window is opened/closed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display:none;
position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>
</body>
</html>
4 answers
solution1
1 2012-06-13 22:25:55
change this code:
from <a href="#" onclick="closePopUp('dialog');">[Close]</a>
to
<a href="javascript:void(0)" onclick="closePopUp('dialog');">[Close]</a>
and also:
<a href="#" onclick="showPopUp('dialog');">Show</a>
to:
<a href="javascript:void(0)" onclick="showPopUp('dialog');">Show</a>
Try that.
solution2
0 2013-05-14 14:20:25
Try changing this
<a href="#" onclick="closePopUp('dialog');">[Close]</a>
to
<a onclick="closePopUp('dialog');">[Close]</a>
and this
<a href="#" onclick="showPopUp('dialog');">Show</a>
to
<a onclick="showPopUp('dialog');">Show</a>
solution3
0 2017-10-18 21:14:00
When you click on the link to open the popup, you are actually navigating to "#" which causes the scrollbar to go back to the top of the page. You really shouldn't use the onclick attribute anymore, it's better to attach an event listener to an element with Javascript.
As mentioned by user Sammy above, using href="javascript:void(0)" should prevent this behavior. Personally I like to just leave the href attribute off of the <a> tag if I'm not actually using it as a standard link. The only downside is that you need to re-style the link to look like a normal link as it will be styled differently if it's missing the href attribute.
I've made a JSFiddle with a solution . As you can see, I removed the href attribute and re-styled the links, using Javascript to add event handlers for the links. You can scroll down a bit and click the link; the popup will open and the scrollbar will remain in the same position.
The code:
HTML:
<div class="container">
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br><a class="close-button" data-popup="dialog">[Close]</a>
</div>
<a class="show-button" data-popup="dialog">Show</a>
</div>
JS
var showButton = document.getElementsByClassName('show-button');
var closeButton = document.getElementsByClassName('close-button');
showButton[0].addEventListener('click', showPopUp);
closeButton[0].addEventListener('click', closePopUp);
function showPopUp(e) {
e.preventDefault();
var dialogId = e.currentTarget.getAttribute('data-popup');
var scrollPos = window.scrollY;
var cvr = document.getElementById("cover")
var dlg = document.getElementById(dialogId)
cvr.style.display = "block"
dlg.style.display = "block"
window.scroll(0, scrollPos);
}
function closePopUp(e) {
e.preventDefault();
var dialogId = e.currentTarget.getAttribute('data-popup');
var cvr = document.getElementById("cover")
var dlg = document.getElementById(dialogId)
cvr.style.display = "none"
dlg.style.display = "none"
}
CSS
.container {
height: 5000px;
}
.show-button,
.close-button {
position: fixed;
color: blue;
text-decoration: underline;
}
.show-button:hover,
.close-button:hover {
cursor: pointer;
}
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display: none;
position: fixed;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
solution4
-1 2012-06-13 22:24:22
try using position:fixed instead of position:absolute. For more read: http://www.w3schools.com/Css/css_positioning.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.