CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorerlightbox
user1108948
user1108948

Reputation:

Transparent background is not working correctly in IE9

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

Upvotes: 0

Views: 1545

Answers (3)

Shawn31313
Shawn31313

Reputation: 6052

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

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28645

It seems to be working for me. Are you positive there isnt something else causing the issue?

Live DEMO

I would recommend setting the height and width of the html and body tags as well. I am not sure if this is the cause, but I think it will help.

html, body {
    height:100%;
    width:100%;
}

I have create an example of just the content you have given us in a html file and it seems to work correctly. I think we need more information. These are the contents that I put in the html file.

<!DOCTYPE html>

<html>
    <head>
        <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>
    </head>
    <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 -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $("a#show-panel").click(function(){
                $("#lightbox, #lightbox-panel").fadeIn(300);
            });

            $("a#close-panel").click(function(){
                $("#lightbox, #lightbox-panel").fadeOut(300);
            })
        </script>
    </body>
</html>

When I compare my test to the one you have given us you are missing the doctype. As soon as I added the doctype everything worked properly.

Upvotes: 0

Jashwant
Jashwant

Reputation: 29005

It may be doctype problem.

Put this before your <html>

<!DOCTYPE html>

Also,

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

in head section.

Upvotes: 1

Related Questions