时间戳

首页 > 解决方案 > 如何在另一个页面上创建一个元素的居中弹出窗口

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

问题描述

我来自 C# 背景，所以请耐心等待，我已经知道我这样做的方式并不理想：

但我需要这样做：

创建一个居中弹出窗口，当用户单击某些文本时，该弹出窗口随页面滚动，代码必须嵌入 HTML 页面中的 JavaScript，没有服务器端（可能是 css 除外）。

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

-我看过很多“弹出式”教程/示例，但由于我需要嵌入式客户端javascript，它限制了有效的方法。

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

标签： javascript

解决方案

听起来您正在寻找模式而不是弹出框，因为您不希望它在与页面交互后关闭。我只需打开一个带有 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)
}

推荐阅读