Home/ Questions/Q 4079334
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T17:47:19+00:00

The following, in Firefox 3.6, simulates a modal overlay: <html> <body> <div id=modal style=position:

  • 0

The following, in Firefox 3.6, simulates a modal overlay:

<html>
<body>

    <div id="modal" style="position: fixed; 
        top: 0; left: 0;right: 0; bottom: 0;
        background: rgba(255,0,0,0.5);
        z-index: 10;">

        <div style="border-style:solid;border-width:5px;
                    position: fixed;top: 50%;left:50%">
           <h2>I am modal</h2>
           <form><input type=submit></form>
         </div>
    </div>


    <div id="notModal" style="height:500px;
                              border-style:solid;border-width:5px;">
        <div>
            <h2>a I am not modal</h2>
            <p>lorem ipsit dolar foo bar baz</p>
            <form><input type=submit></form>
        </div>
    </div>
</body>
</html>

In particular, text in the “modal” div can be selected, and the submit button in the “modal” div can be clicked, but nothing in the “notModal” div can be selected or clicked.

In Internet Explorer 8, that’s not the case; the “notModal” text can be selected and teh “notModal” submit can be cliecked.

Is there a way to make this work under the various versions of IE, without using javascript?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE has a lot of issues with transparency (it doesn’t support rgba). There are also known issues with z-indexing.

    Try something like this.

    Notes:

    • Most IE z-index issues can be fixed by applying z-indexes to the parent elements of the elements you’re trying to specify a z-index for.
    • I moved the modal window out of the cover (previously modal) div so that IE doesn’t try to apply the filter to it.

    Example
    HTML

    <div id="cover"></div>
<div id="modalbox">
   <h2>I am modal</h2>
   <form><input type=submit></form>
 </div>

<div id="notModal">
    <div>
        <h2>a I am not modal</h2>
        <p>lorem ipsit dolar foo bar baz</p>
        <form><input type=submit></form>
    </div>
</div>

    CSS

    body {
    z-index: 1;
}
#cover {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter:alpha(opacity=50); /* Only applies to IE */
    background: red; /* This will be overwritten by browsers that support rgba */
    background: rgba(255,0,0,0.5); /* IE ignores this since it's not supported */
    z-index: 10;
}
#modalbox {
    border:solid 5px #ccc;
    position: fixed;
    top: 50%;
    left:50%;
    z-index: 20;
}
#notModal {
    height:500px;
    border:solid 5px #ccc;
    z-index: 5;
}
    • 0