因此，我正在开发第一个严肃 网站。我想实现以下场景，但我需要指导和建议。有一个按钮<input type="submit">在我的网页上。当用户单击它时，我希望它打开一些 HTML 内容，这些内容将显示在所有页面内容的顶部(并居中放置，但我目前不关心该细节)。它应该与在 Facebook 上查看照片的方式非常相似。当用户单击照片缩略图时，照片会在所有页面内容的顶部打开。
现在，我已经实现了这个，但我认为我的方法不值得推荐，因为它对我来说看起来有点笨拙，尤其是当我考虑网站的维护时:
我添加了一个 <div>作为 <body> 的最后一个元素;它绝对定位并折叠并用作容器。单击按钮时，即 <div>被内容填充，状态从折叠变为可见。
如果有人愿意分享用于实现此效果的标准方法和意见，我将不胜感激。我猜测应该为此大量使用 AJAX 和 jQuery(我在前面描述的设计中使用了纯 JavaScript)。我正在寻找一些代码示例和资源。非常感谢。
最佳答案
您正在寻找的是模态对话框，而不是弹出窗口。弹出窗口是新窗口，而模态窗口是 HTML 元素，它们会阻止其后面的页面以强调向前的内容。
一种方法是使用 <div>附加到 body ，通常是 body 的末端，并将其定位为绝对。该 div 将具有顶部、底部、左侧和右侧零以拉伸(stretch)以适合视口(viewport)。在该 div 中还有另一个 div，它也相对于父视口(viewport)适合的 div 是绝对定位的。定位由您决定，但通常使用公式居中:
center = (total length - modal length)/2
内容由您决定。你可以让内容已经加载并隐藏在 DOM 中，你可以稍后显示。或者，如果您愿意，可以通过 AJAX 加载内容。
jQuery already has a modal plugin在您可以使用的 jQueryUI 套件中，它包含许多添加和自定义的方法。
关于javascript - 如何在网页中显示模态对话框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10777191/