CODEWITHSUNDEEP
javascriptjqueryjquery-uimodal-dialogsimplemodal
user717236
user717236

Reputation: 5039

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.

Upvotes: 0

Views: 2231

Answers (3)

user717236
user717236

Reputation: 5039

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.

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

Having a quick look at the plugin, I would guess that the event bubbling isn't properly handled:

// bind the overlay click to the close function, if enabled
if (s.o.modal && s.o.close && s.o.overlayClose) {
  s.d.overlay.bind('click.simplemodal', function (e) {
    e.preventDefault();
    s.close();
  });
}

I'm admittedly a bit out of my depth here, but as far as I can tell, the overlay doesn't actually have any "Default" behaviour that needs to be prevented. What needs to be prevented is event propagation.

Try adding this above the preventDefault line in the non-minified version of the plugin itself (you can just keep preventDefault, too; there's no harm):

e.stopPropagation();

Of course, you have to be including this non-minified script rather than the one you're currently including. I'd be curious to know if it helps. Apologies for presenting an "answer" without actually testing it, but it's more time-intensive to set up a test than I'd prefer. ;-)

Downside, if it DOES work: tricky to find the right spot to slip this into the minified version. Might be easier to re-minify the whole thing yourself with the tool of your choice.

[Addendum:] If the e.stopPropagation(); doesn't work you could go old school and add

return false;

after s.close();

Upvotes: 1

Andrei Bozantan
Andrei Bozantan

Reputation: 3921

In your example code you should properly close the input tags and remove the extra colon in the second input. Also in order to check if it works maybe you should add the simple modal CSS styles, at least for the overlay:

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

Also check the developer console for any errors. Anyway, I tried your code, and the "click me" button is disabled as it should be.

Upvotes: 1

Related Questions