javascript - 如何在另一个页面上创建元素的居中弹出窗口

Question

我有 C# 背景，所以请耐心等待，我已经知道我的处理方式并不理想:

但我需要这样做:

创建一个居中弹出窗口，当用户单击某些文本时，它会随页面滚动，代码必须嵌入 HTML 页面中的 JavaScript，而不是服务器端(可能除了 css)。

- 最好是弹出窗口的文本链接需要可重用，我不想为每个链接嵌入一堆代码。

-我看过很多“弹出”教程/示例，但由于我需要嵌入式客户端 JavaScript，所以它限制了工作。

结果我希望有一个带有预制弹出窗口的网页，我可以从其他网页(如 OpenPopup(webpage.getElement(popupNumber12)) )引用它，或者有带有弹出窗口标题和我可以传递的描述的数组。

Answer 1

听起来您正在寻找模式而不是弹出窗口，因为您不希望它在与页面交互后关闭。我只需使用 onClick 事件打开一个模式，然后将其位置描述为:

.modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
   }

假设您要显示的模态框的宽度为 300px。

如果您正在使用 SCSS

$width = 300px
$height = 300px

.modal {
    width: $width;
    height: $height;
    position: absolute;
    left: calc(50% - $width)
    top: calc(50% - $height)
}