HTML5/CSS3 Modal Box Compatibility with IE

Question

I'm playing around with HTML5/CSS3 for the first time and have used a nice wee link to a dialog (modal) display on one of my pages.

This works like a dream in Chrome/Firefox but not in IE (Possibly not a huge surprise).

In IE (9) the page actually freezes entirely when trying to click on a link..

Could anyone point out exactly what part of the CSS is incompatible and if there is a fix available?

Code is found below, thanks in advance.

HTML

 <td><a href="#Code1">Get Date / Without Time</a></td>


 <div id="Code1" class="modalDialog">

 <div>

<a href="#close" title="Close" class="close">X</a>
<h2>TITLE</h2>
<p>TEXT</p>
        </div>
        </div>

CSS

.modalDialog {
        position: fixed;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 40%;
        height: auto;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #FFFFFF;
        background: -moz-linear-gradient(#FFFFFF, #999999);
        background: -webkit-linear-gradient(#FFFFFF, #999999);
        background: -o-linear-gradient(#FFFFFF, #999999);
    }

    .close {
        background: #285C82;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { color: #285C82; background: #FFFFFF; }

Answer 1

in all the tags where you wrote -webkit-, -moz- or -o- you didnt wrote -ms- which is the prefix for internet explorer. transition doesnt work at internet explorer at all, you can see the internet explorer support in w3schools

boaz

Answer 2

IE9 does not support CSS pointer-events . In all browsers the dialog is invisibly (opaquely) rendered over the whole page but in IE9 the pointer events are not ignored and therefore the dialog is blocking the click event on the anchor.

There is probably a cleaner way to solve this but as a workaround you could add the following properties in a separate stylesheet for IE using conditional comments .

.modalDialog {
    display:none;
}

.modalDialog:target {
    display:block;
}

Another workaround is to give the <a> position and a z-index > the z-index of the dialog.

Also, CSS transition is not supported in IE9 so you might need to look for an alternative, maybe IE < 9 CSS3 Transition Effect Cheats? will help.