Search code examples
javascriptjqueryjquery-uimodal-dialogsimplemodal

Using simplemodal (modal) -- Does not work right in IE -- modal displays but background elements are clickable; works in firefox, though

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.

Solution

  • 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.

    #simplemodal-overlay {background-color:#000; cursor:wait;}

    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.