Question

I have a lightbox. The html code:

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

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

The demo is prefect of course.

However if we remove the CSS for lightbox, http://jsfiddle.net/zhshqzyc/HjCyA/1/
the form didn’t change at all. I just wonder what is the function of the CSS of lightbox?

Answer 1

Do you see something strange with this comment?

* /Lightbox background */
#lightbox {

This is currently not a comment, but a very malformed selector:

* /Lightbox background */ #lightbox {

Let’s fix it:

/* Lightbox background */
#lightbox {

Now you can see what #lightbox does 🙂

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