Home/ Questions/Q 8330715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:12:05+00:00

Basically it is a lightbox demo. The code is from here. I want to

  • 0

Basically it is a lightbox demo. The code is from here. I want to click a link “Show Panel” then pop out a form.
It works well in Firefox but wrong in IE9.

The html code is quite simple:

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

The CSS:

<style type="text/css">

#lightbox {
display:none;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
background-color: #FFCC66;
    }

#lightbox-panel {
display:none;
position:fixed;
top:180px;
left:50%;
margin-left:-200px;
width:450px;
border:2px solid #CCCCCC;
z-index:1001;
background-color: #999900;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
    }

.show-panel {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
    }
    </style>

The JQuery code:

$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
})
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })

The effect in firefox:
firebox

The effect in IE9:
IE9

You see not only the Transparent background but also the position of the lightbox are not right.

Thanks for help.

The entire code:

https://skydrive.live.com/?cid=03a8bb9eaeeff1db#cid=03A8BB9EAEEFF1DB&id=3A8BB9EAEEFF1DB!234

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Issue

    As Jashwant said it might be a doctype issue. And thats exactly the issue. It was fixed once I put added the HTML 5 doctype in front of the <html> tag.

    <!DOCTYPE html>

    Remember that IE isn’t as smart as some other browsers. So you should use the correct setup for a webpage:

    <!DOCTYPE html>

<html>
  <head>
  </head>

  <body>
  </body>
</html>

    It does seem to be working on this JsFiddle.

    I do see you said it works fine on the JsFiddle on your side too. So, could you post your whole HTML on a pasteTool like pastebin? That would make fixing this easier.

    One thing, I want to point out though is that the way your centering the lightbox vertically is not even.

    The width of the lightbox is 450px so for the margin-left you are going to want to half that. Half of 450 is 225, so your new margin-left is -225px.

    This would make it perfectly in the center. I also like using JavaScript to get the width of the object and do the math in there. Which will take the page a little longer to load since it has to do a little more work but I think it works pretty well.

    This is a little off topic considering that to you the lightbox doesn’t seem to be working on that HTML page but I thought this might also be useful. Make sure you check your HTML again. There might be an issue that IE can’t fix while other browsers like Google Chrome can.

    Oh and if you want to center the lightbox horizontally you can use the same method, you just half the height and use the negative form of that in the margin-top

    • 0