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>
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-indexis set to 99999. If you change the link to have aposition: relativeand az-indexthat 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
.hideclass that hasdisplay:none;and use JQuery to show/hide that class so as to easily toggle your modal.Hope that helps