Modal not working in IE10, but works fine in other browsers

Question

I am creating a modal dialog based on a CSS only approach from the online example below. It works great in IE 11, Chrome and Firefox, but in IE 9 and IE 10, the modal doesn't work.

In IE 9 and IE 10, you can't click any of the content - in this example it's a link, but in my own implementation I have several buttons on the page, only one of which actually opens the modal, and they all can't be clicked - I'm thinking because the modal might be sitting overtop of the buttons somehow, even though it's invisible.

Can anyone please help me figure out why this isn't working in IE 9 and IE 10, and whether there's anything I can do to fix it in those browsers? Also, I'm a little new to web development. Is there any tools that can analyze your markup and CSS to see if there's any compatibility issues with older browsers? Maybe a tool like that could have helped me here.

Here is the JSFiddle

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

Or here is the code you could just save into an HTML file and load into the browser.

<!doctype html>
<html lang="en">
<head>
  <style>
  .modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    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: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
  }

  .close {
    background: #606061;
    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 {
    background: #00d9ff;
  }
  </style>
</head>
<body>
  <a href="#openModal">Open Modal</a>
  <div id="openModal" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Modal Box</h2>

      <p>This is a sample modal box that can be created using the powers of CSS3.</p>
      <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
    </div>
  </div>
</body>

Transitions don't work in IE9 first off. – Rob Jun 10 '15 at 20:30 — Rob, Jun 10 '15 at 20:30

score 1 · Accepted Answer · edited May 23 '17 at 12:22

The way the code is rendering in IE 10 is the modal opacity is set to 0 but the modal layer is still existing above the the 'open modal' link since the modal z-index is set to 99999. If you change the link to have a position: relative and a z-index that is larger than 99999 you will be able to access the modal using your link except now the link will show "on top" of the modal when its opened (which I am assuming you dont want to have happen)

Part of problem is pointer events are not supported in IE 9 & 10. You can read more about that here (and maybe find a work around?)

I personally suggest using a .hide class that has display:none; and use JQuery to show/hide that class so as to easily toggle your modal.

Hope that helps

Thanks, yes this does help. I actually think I can fix this by setting z-index to -1 in the .modalDialog CSS, and then in the .modalDialog:target CSS I can set z-index back to some positive number, like 99 or something. — Jim, Jun 10 '15 at 20:46

score 1 · Answer 2 · answered Jun 10 '15 at 22:10

1

Set the initial state of the modal to z-index:-1.

There is a conflict with the z-indexes. Despite the modal has no opacity, it still takes up the space and prevents the link to be clicked on IE10.

See Demo

answered Jun 10 '15 at 22:10

Oriol

11,660
5
35
37

Thanks, yes this is how I solved the problem. The real issue is that I was using someone else's example without fully understanding it - now I understand it better. – Jim Jun 11 '15 at 14:16

Modal not working in IE10, but works fine in other browsers

2 Answers2