0

我有一个灯箱。html代码：

<a id="show-panel" href="#">Show Panel</a>

<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
    <a id="close-panel" href="#">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->

CSS：

 * /Lightbox background */
 #lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}
 /* Lightbox panel with some content */
 #lightbox-panel {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#AFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}

演示当然是完美的。

但是，如果我们删除灯箱的 CSS，http://jsfiddle.net/zhshqzyc/HjCyA/1/ 表单根本没有改变。我只是想知道灯箱的CSS的作用是什么？

4

1 回答 1

2

你觉得这条评论有什么奇怪的地方吗？

* /Lightbox background */
#lightbox {

这目前不是评论，而是一个非常畸形的选择器：

* /Lightbox background */ #lightbox {

让我们修复它：

/* Lightbox background */
#lightbox {

现在你可以看到是什么#lightbox:)

http://jsfiddle.net/HjCyA/3/

于 2012-08-03T17:44:21.133 回答