Question

I have an ASP.NET 3.5 web site project. In it there exists a page (A); within this page there is an <iframe> that loads another page (B). From B, a modal dialog is launched through this function:

function ShowDialogLookup(anchorDiv) {
    // anchorDiv is div element with some data properties
    var result = window.showModalDialog($(anchorDiv).data('popup-url'), window, "dialogHeight: 300px; dialogWidth: 500px");
    return false;
}

Disclaimer: I wish a thousand times over I could rewrite this to use a jQuery Dialog in modal mode, but I’m only responsible for getting it to work in IE9. So with that said…

In this popup, the page that is displayed contains an “OK” and a “Cancel” button. The “Cancel” button is simply:

<button class="lookup-cancel">Cancel</button>

It is assigned an event to close the modal dialog:

$('.lookup-cancel').button().click(function() {
    window.close();
});

In IE9, non-compatibility-view mode, clicking the button causes two things to happen:

1. The modal dialog closes, but
2. A second, full-frame window is launched using the same URL as the modal dialog.

The “Cancel” button within the full window now works properly, when it’s no longer contained within a modal dialog window, but whatever prompted IE to launch it is unexpected behavior.

In IE9, with compatibility-view mode enabled, clicking the button does exactly what it’s supposed to.

• Have I done something jQuery or IE-wise that breaks in IE9 that would have worked in IE 6, 7, or 8?

Answer 1

I got lucky on this one. IE9 apparently cares about the type of the <button>. In this case, IE9 treats it as a submit button. The act of “submitting” was causing a separate page to load outside of the modal dialog.

Changing the button to:

<button type="button" class="lookup-cancel">Cancel</button>

solved the issue.