我有一个灯箱。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的作用是什么?