无论分辨率如何，都可以在屏幕中间显示内联HTML/JavaScript弹出窗口

Getting inline HTML/JavaScript popup to appear in the middle of screen regardless of resolution

本文关键字：HTML JavaScript 窗口 显示 中间 分辨率 屏幕 都可以      更新时间：2023-09-26

我正在使用以下Javascript和CSS创建弹出窗口：

<script type="text/javascript">
    Sys.debug = true;
    var popup;
    Sys.require(Sys.components.popup, function () {
        popup = Sys.create.popup("#popup", {
            parentElementID: "target",
        });
    });
    var popup2;
    Sys.require(Sys.components.popup, function () {
        popup2 = Sys.create.popup("#popup2", {
            parentElementID: "target",
        });
    });
</script>
#popup
{
    width: 400px;
    height: 250px;
    overflow: scroll;
    background-color: #EAFDB3;
    border: solid 2px black;
}
#popup2
{
    width: 400px;
    height: 250px;
    background-color: #EAFDB3;
    border: solid 2px black;
}

这些弹出窗口出现的位置是用完成的

 <span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>

弹出窗口的内容介于：

<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>

无论分辨率如何，我如何才能让这个弹出窗口在屏幕中间弹出？

将顶部设置为50%，左侧设置为50%。然后有一个负的左边距，是弹出窗口宽度的一半，负的上边距是弹出窗口高度的一半。你所拥有的似乎很接近。。。

但如果弹出窗口大小为400x250，则页边空白顶部应为-125像素，左侧应为-200像素。

对于动态大小的弹出窗口，请考虑将内容包装在div.vc-outer和div.vc-inner.中

CSS

.vc-outer {
  display: table;
  position: fixed;
  width: 100%;
  height: 100%; }
.vc-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle; }
.popup {
  display: inline-block; }

HTML

<div class="vc-outer"><div class="vc-inner">
  <div class="popup">Hey!</div>
</div></div>

您在使用ID的同时也提供了内联样式（甚至是相同的属性）

相关文章：