[英]how to prevent javascript div popup from jumping back to the top of the page?
我有以下简洁的代码,当单击链接时会打开一个小的弹出框...问题是我在包含很多内容的很长的页面上使用它,每当有人打开弹出窗口时,实际的内容页面就会跳回到顶部,如果有人花了一段时间向下滚动,这很烦人。 即使弹出窗口已打开/关闭,如何强制页面停留在该页面?
<!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>
试试看
尝试改变这个
<a href="#" onclick="closePopUp('dialog');">[Close]</a>
至
<a onclick="closePopUp('dialog');">[Close]</a>
和这个
<a href="#" onclick="showPopUp('dialog');">Show</a>
至
<a onclick="showPopUp('dialog');">Show</a>
当您单击链接以打开弹出窗口时,实际上是在导航至“#”,这将导致滚动条返回页面顶部。 您确实不应该再使用onclick属性,最好将事件侦听器附加到使用Javascript的元素上。
如上述用户Sammy所述,使用href="javascript:void(0)"
可以防止此行为。 就我个人而言,如果我实际上没有将href
属性设置为<a>
标记,则实际上不使用它。 唯一的缺点是您需要重新设置链接的样式以使其看起来像普通链接,因为如果缺少href
属性,则其样式将有所不同。
我用解决方案制作了一个JSFiddle 。 如您所见,我使用Javascript为链接添加了事件处理程序,从而删除了href
属性并重新设置了链接的样式。 您可以向下滚动并单击链接。 弹出窗口将打开,滚动条将保持在相同位置。
编码:
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
}
尝试使用position:fixed而不是position:absolute。 有关更多信息,请访问: http : //www.w3schools.com/Css/css_positioning.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.