IE9、showModalDialog() 和 window.close() - 兼容性视图的怪癖答案

【问题标题】：IE9, showModalDialog() and window.close() - quirks with compatibility viewIE9、showModalDialog() 和 window.close() - 兼容性视图的怪癖
【发布时间】：2012-01-10 23:27:10
【问题描述】：

我有一个 ASP.NET 3.5 网站项目。其中有一个页面（A）；在此页面中有一个 <iframe> 加载另一个页面 (B)。从 B 中，通过这个函数启动一个模态对话框：

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;
}

免责声明：我希望我可以重写一千次以在模态模式下使用 jQuery 对话框，但我只负责让它在 IE9 中工作。所以说...

在此弹出窗口中，显示的页面包含一个“确定”和一个“取消”按钮。 “取消”按钮很简单：

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

它被分配了一个关闭模态对话框的事件：

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

在 IE9 中，非兼容性视图模式，点击按钮会导致两种情况发生：

模式对话框关闭，但是
使用与模式对话框相同的 URL 启动第二个全帧窗口。

整个窗口中的“取消”按钮现在可以正常工作，但它不再包含在模式对话框窗口中，但无论提示 IE 启动它是什么都是意外行为。

在 IE9 中，启用兼容性视图模式，单击按钮完全符合预期。

我是否做过一些 jQuery 或 IE 方面的事情，在 IE9 中会中断而在 IE 6、7 或 8 中可以使用？

【问题讨论】：

标签： javascript internet-explorer-9 cross-browser

【解决方案1】：

我很幸运得到了这个。 IE9 显然关心<button> 的type。在这种情况下，IE9 将其视为提交按钮。 “提交”的行为导致在模式对话框之外加载一个单独的页面。

将按钮更改为：

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

解决了这个问题。

【讨论】：