所以，我正在开发第一个严重的网站。我想实现以下场景，但我需要指导和建议。我的网页上有一个按钮<input type="submit">。当用户点击它时，我希望它打开一些HTML内容，这些内容将显示在所有页面内容之上（并集中定位，但我现在不关心这个细节）。它应该与在Facebook上观看照片的方式非常相似。当用户单击照片缩略图时，照片将在所有页面内容之上和之间打开。
现在，我已经实现了这一点，但我认为我的方法不值得推荐，因为它看起来有点笨拙，特别是当我考虑维护网站时：
我添加了<div>作为<body>的最后一个元素;它绝对定位并折叠并用作容器。单击该按钮时，<div>将填充内容，状态将从折叠状态更改为可见状态。
如果有人愿意分享用于实现此效果和意见的标准方法，我将非常感激。我猜测应该大量使用AJAX和jQuery（我在前面描述的设计中使用了纯JavaScript）。我正在寻找一些代码示例和资源。非常感谢你。
答案 0 :(得分：2)
您要找的是模态对话框，而不是弹出式窗口。弹出窗口是新窗口，而模态是HTML元素，阻止其后面的页面强调前向内容。
一种方法是将<div>附加到身体上，通常是身体的末端，并将其置于绝对位置。该div将具有顶部，底部，左侧和右侧零点以伸展以适合视口。在该div内是另一个div，它也相对于父视图，视口匹配div而言是绝对的。定位取决于您，但通常使用公式进行定位：
center = (total length - modal length)/2
内容取决于您。您可以将内容加载并隐藏在DOM中，以后可以显示。或者，如果您愿意，可以通过AJAX加载内容。
jQueryUI套件中的jQuery already has a modal plugin，你可以使用它包含很多方法来添加和自定义。
答案 1 :(得分：0)
那里有很多方法。您可以使用jQuery UI（http://jqueryui.com）。但我喜欢Twitter的Bootstrap采用的方法：http://twitter.github.com/bootstrap/javascript.html#modals
这是一个非常干净的设置，您可以通过AJAX加载内容并使用一些自写功能。你不需要自己写一切，因为那里有很多插件。引导模式插件是独立的，所以你可以使用这个。
我喜欢使用它并使用AJAX请求生成内容div。
答案 2 :(得分：0)
您可以position: absolute;弹出框并将其设置在您想要的屏幕上。然后使用z-index将其放在内容上。
答案 3 :(得分：0)
我相信你所寻找的可能是Lightbox - 就像？它至少可以给你一些想法。