0

所以，我正在开发第一个严肃的网站。我想实现以下场景，但我需要指导和建议。<input type="submit">我的网页上有一个按钮。当用户单击它时，我希望它打开一些 HTML 内容，这些内容将显示在所有页面内容的顶部（并位于中心，但我现在不关心那个细节）。它应该与在 Facebook 上查看照片的方式非常相似。当用户单击照片缩略图时，照片会在所有页面内容的顶部打开。

现在，我已经实现了这一点，但我认为我的方法不值得推荐，因为它看起来有点笨拙，尤其是当我考虑网站的维护时：
我在 ; 中添加了 a<div>作为最后一个元素<body>。它被绝对定位并折叠并用作容器。单击按钮时，该按钮将<div>被内容填充，并且状态从折叠变为可见。

如果有人愿意分享用于实现此效果的标准方法和意见，我将不胜感激。我猜测应该大量使用 AJAX 和 jQuery（我在前面描述的设计中使用了纯 JavaScript）。我正在寻找一些代码示例和资源。非常感谢。

4

4 回答 4

2

您正在寻找的是模式对话框而不是弹出窗口。弹出窗口是新窗口，而模态框是 HTML 元素，它们会阻止其后面的页面以强调转发内容。

一种方法是<div>附加到正文，通常附加到正文的末尾并使其绝对定位。该 div 将具有顶部、底部、左侧和右侧零以拉伸以适合视口。在该 div 中是另一个 div，它也相对于父级、视口拟合 div 定位为绝对值。定位取决于您，但通常使用公式居中：

center = (total length - modal length)/2

内容由您决定。您可以将内容加载并隐藏在 DOM 中，稍后再显示。如果您愿意，也可以通过 AJAX 加载内容。

jQuery在 jQueryUI 套件中已经有一个模态插件，您可以使用它包含许多添加和自定义的方法。

于 2012-05-27T21:01:55.487 回答
0

有很多方法。您可以使用 jQuery UI (http://jqueryui.com)。但我喜欢 Twitter 的 Bootstrap 采用的方法：http: //twitter.github.com/bootstrap/javascript.html#modals

这是一个非常干净的设置，您可以通过 AJAX 加载内容，并带有一点自写功能。您不需要自己编写所有内容，因为那里有很多插件。bootstrap modal 插件是独立的，所以你可以使用这个。

我喜欢使用它并通过 AJAX 请求生成内容 div。

于 2012-05-27T20:59:38.000 回答
0

您可以position: absolute;弹出框并将其设置在屏幕上您想要的位置。然后用z-index它来覆盖内容。

这是一个演示：http: //jsfiddle.net/e6BEu/

于 2012-05-27T21:02:41.693 回答
0

我相信您正在寻找的可能是Lightbox之类的？它至少可以给你一些想法。

编辑：或者这个支持文本等的。

于 2012-05-27T21:04:12.313 回答