如何防止javascript div彈出窗口跳回到頁面頂部？

Question

我有以下簡潔的代碼，當單擊鏈接時會打開一個小的彈出框...問題是我在包含很多內容的很長的頁面上使用它，每當有人打開彈出窗口時，實際的內容頁面就會跳回到頂部，如果有人花了一段時間向下滾動，這很煩人。 即使彈出窗口已打開/關閉，如何強制頁面停留在該頁面？

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

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

試試看

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

Answer 3

當您單擊鏈接以打開彈出窗口時，實際上是在導航至“＃”，這將導致滾動條返回頁面頂部。 您確實不應該再使用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
}

Answer 4

嘗試使用position：fixed而不是position：absolute。 有關更多信息，請訪問： http : //www.w3schools.com/Css/css_positioning.asp

如何防止javascript div彈出窗口跳回到頁面頂部？

問題描述

4 個解決方案

解決方案1
1 2012-06-13 22:25:55

解決方案2
0 2013-05-14 14:20:25

解決方案3
0 2017-10-18 21:14:00

解決方案4
-1 2012-06-13 22:24:22

如何防止javascript div彈出窗口跳回到頁面頂部？

問題描述

4 個解決方案

解決方案1 1 2012-06-13 22:25:55

解決方案2 0 2013-05-14 14:20:25

解決方案3 0 2017-10-18 21:14:00

解決方案4 -1 2012-06-13 22:24:22

解決方案1
1 2012-06-13 22:25:55

解決方案2
0 2013-05-14 14:20:25

解決方案3
0 2017-10-18 21:14:00

解決方案4
-1 2012-06-13 22:24:22