javascript - 如何在点击的地方显示div覆盖，而不是在html中的屏幕顶部

Question

我有以下 css 和 js:

<style type="text/css">
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
</style>
<script>
function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

我有以下 HTML:

<table>
    <tr>
        <td> Click button</td>
        <td><a href='#' onclick='overlay()'>Click here to show the overlay</a></td>
    </tr>
</table>

问题是，当我单击它时，页面会滚动回顶部并显示对话框。

我希望叠加层能够正确显示。我怎样才能做到这一点？

Answer 1

使用位置固定，使用百分比显示:

#overlay {
     visibility: hidden;
     position: fixed;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

根据滚动，您可以在函数中返回 false:

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    return false;
}