Question

因此,我正在开发第一个 serious 网站。我想执行以下方案, 但我需要指导和建议。在我网页上有一个按钮 < code> lt; input type='submit' > 。当用户点击它时, 我希望它打开一些 HTML 内容, 这些内容将在所有页面内容之上显示( 位于中央, 但是目前我并不关心这个细节 ) 。它应该与脸书上的照片查看方式非常相似。当用户点击照片缩略图时, 照片会在所有页面内容上方和上方打开。

Now, I ve implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.

如果有人愿意分享实现这一效果和看法所使用的“标准”方法,我将非常感激。我想AJAX和jQuery应该为此大量使用(我在前面描述的设计中使用纯JavaScript)。我正在寻找一些代码样本和资源。非常感谢。

Answer 1

您正在寻找的是一个 < em> modal 对话框 < / em >, 而不是弹出。弹出是新窗口, 而模式是 HTML 元素, 阻挡页面后面的页面, 以强调远端内容。

一种方式是将 < code\lt; div> 附加到身体上, 通常在身体的末端, 并且将其定位为绝对位置。 div 的顶部、底部、左侧和右侧零位将伸展到与视图站点相适应的边框。在 div 中, 另一 div 的边框也是相对于父版的绝对位置。位置由您决定, 但通常由您以公式为中心 :

center = (total length - modal length)/2

内容由您决定。您可以在 DOM 中装入并隐藏内容, 稍后您可以显示。或者通过 AJAX 装载内容, 如果您愿意的话。

< a href=" "http://jqueryui.com/demos/dialog/#modal" rel="nofollow" >jQuery 在 jQueryUI 套件中已经有一个模式插件 , 您可以使用该套件来添加和定制许多方法。

Answer 2

有许多方法。您可以使用 jQuery UI (http://jqueryui.com) 。但我喜欢Twitter的“ 诱饵陷阱” : < a href="http://twitter.github.com/bootsstrap/javascript.html#modals” rel=“no follow” >http://twitter.github.com/bootsstrap/javascrip.html#modals

这是一个非常干净的设置, 您可以通过 AJAX 以一个小的自写功能装入内容。您不需要自己写下所有内容, 因为外面有很多插件。而靴套模型插件是独立的, 这样您就可以使用这个。

我喜欢用它并生成内容div 与AJAX请求。

Answer 3

position: 绝对; 弹出框并将其设置在您想要的屏幕上的位置。然后使用 z- index 将其放在内容上。

这是演示文稿:http://jsfiddle.net/e6BEu/

Answer 4

我相信你们要找的可能是Lightbox - like? 它至少可以给你们一些想法。

编辑: 或< a href=> "http://www.gregphoto.net/ lightbox/" rel="nofollow" > 支持文本和这种的这个。

友情链接