-3

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

我只是想知道它们是如何工作的。如果我理解得很好，一个花哨的盒子是：

1）禁用html页面上的所有事件

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

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

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

有什么线索吗？

问候

4

3 回答 3

2

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

于 2012-11-28T15:32:29.443 回答
0

http://jsfiddle.net/75LTD/ Like so:

<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;}

​</p>

于 2012-11-28T15:37:14.617 回答
0

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

于 2012-11-28T15:33:26.243 回答