Question

我知道如何使用花式盒子，我知道它们有很多。 我的目标是创建一个非常简单的，更多用于教程目的和好奇心。

我只是想知道他们是如何运作的。如果我理解得很好，一个奇特的盒子是：

1）禁用html页面上的所有活动

2）在顶部显示半透明图像

3）在顶部显示居中的div。

第3点似乎很清楚。我只是想知道第1点和第2点是如何工作的。

有任何线索吗？

问候

Answer 1

1和2是一回事。通过在整个页面上放置半透明覆盖层（这通常是具有100％宽度和高度的绝对定位的div），可以防止用户与任何内部元素进行交互。

Answer 2

灯箱/花式箱基本上是两个分隔元件;一个覆盖整个页面（因此是半透明），一个包含“弹出”内容。它们有多种口味和特征，但这两件事是最重要的。

Answer 3

http://jsfiddle.net/75LTD/同样如此：

<body style="width:100%; height:1024px;">
<div class="overlay">

    <div class="lightbox"></div>
</div>
<p>sdjfhsd</p>
</body>

CSS：

.overlay{width:100%; height:100%; position:fixed; left:0; background:rgba(0,0,0,0.6); }
.lightbox{position:absolute; top:50%; margin-top:-100px; left:50%; margin-left:-100px; height:200px; width:200px; background:#FFF; border-radius:10px;}

jquery中的精美盒子：它是如何工作的？

3 个答案: