I’m having issues here implementing the SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) version of a modal window. It works correctly in a browser like Firefox, but is not working properly in IE — the background elements are clickable and functional, which is not the desired affect of a modal window. Why is IE not behaving properly with simplemodal (besides that it’s IE) and how can I erect a fix?
These are the scripts I’m using:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.1.4.1.min.js"></script>
Here is the html and code:
<body>
<div id="Content">
<a href="http://www.google.com">google</a>
<input type="button" value="click me" onclick="javascript:alert('should not work');">Hello World
<input type="button" value="open modal" onclick="javascript:$.modal('<div><h1>Simple Modal</h1></div>');">
</div>
</body>
Thank you very much for any help.
Update
I edited the question and summary of my plight. I want to stress that I tested this in Firefox and it works. My concern here is it’s not working properly in IE.
I downloaded the demo and dissected it to its skeletal parts. It turns out this line in one of the css files disables all background elements.
That’s an internal div for simplemodal and setting cursor to ‘wait’ is the answer. The version of IE did not seem to make a difference, either.