如何防止 javascript div 弹出窗口跳回页面顶部？答案

【问题标题】：how to prevent javascript div popup from jumping back to the top of the page?如何防止 javascript div 弹出窗口跳回页面顶部？
【发布时间】：2017-10-19 05:19:03
【问题描述】：

我有以下简洁的代码，当点击链接时会打开一个小弹出框......问题是我在一个非常长的页面上使用它，页面内容很多，每当有人打开弹出窗口时，实际内容页面跳回最顶部，如果有人只是花了一段时间向下滚动，这很烦人。即使弹出窗口打开/关闭，如何强制页面停留在那里？

<!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>

【问题讨论】：

使用几年前发明轮子的库...
对不起，我在问之前搜索了高低，但我是一个 javascript 假人，自己找不到答案。我搜索并没有找到任何有意义的东西......
和这个问题类似吗？ (stackoverflow.com/questions/1155952/…)
看看jQuery ui-dialog widget
我尝试添加一个 return false;到函数的末尾，但这没有帮助。

标签： javascript css html popup

【解决方案1】：

更改此代码：

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>

试试看。

【讨论】：

不幸的是，这不起作用。它显示弹出框，但在最顶部不在屏幕上。

【解决方案2】：

尝试更改此设置

<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>

【讨论】：

【解决方案3】：

当您单击链接打开弹出窗口时，您实际上是在导航到“#”，这会导致滚动条返回到页面顶部。你真的不应该再使用 onclick 属性了，最好使用 Javascript 将事件监听器附加到元素。

正如上面用户 Sammy 所提到的，使用 href="javascript:void(0)" 应该可以防止这种行为。如果我实际上没有将其用作标准链接，我个人喜欢将href 属性从<a> 标记中删除。唯一的缺点是您需要重新设置链接的样式以使其看起来像普通链接，因为如果缺少 href 属性，它将采用不同的样式。

我创建了一个JSFiddle with a solution。如您所见，我删除了 href 属性并重新设置了链接的样式，使用 Javascript 为链接添加事件处理程序。您可以向下滚动一点并单击链接；弹出窗口将打开，滚动条将保持在同一位置。

代码：

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>

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
}

【讨论】：

【解决方案4】：

尝试使用 position:fixed 而不是 position:absolute。更多阅读：http://www.w3schools.com/Css/css_positioning.asp

【讨论】：