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 に答える