我有以下简洁的代码，当单击链接时会打开一个小弹出框...问题是我在一个包含很多内容的很长的页面上使用它，每当有人打开弹出窗口时，实际内容页面跳回到最顶部，如果有人只是花了一段时间向下滚动，这会很烦人。即使弹出窗口打开/关闭，我如何强制页面停留在那里？
<!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>
最佳答案
更改此代码:
from <a href="#" onclick="closePopUp('dialog');">[Close]</a>
到
<a href="javascript:void(0)" onclick="closePopUp('dialog');">[Close]</a>
还有:
<a href="#" onclick="showPopUp('dialog');">Show</a>
到:
<a href="javascript:void(0)" onclick="showPopUp('dialog');">Show</a>
试试吧。
关于javascript - 如何防止javascript div弹出窗口跳回到页面顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11024123/