IE8 不能与 jQuery 对话框一起使用答案

【问题标题】：IE8 not working with jQuery DialogIE8 不能与 jQuery 对话框一起使用
【发布时间】：2012-02-07 23:40:50
【问题描述】：

我有一个 HTML 表单：

<div id="dialog" class="event-dialog" title="Create Event">
    <div id="dialog-inner">
    <table>
        <tr><td align="left">Event Name:</td><td align="left"><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all title"></td></tr>
        <tr><td align="left" valign="top">Event Description:</td><td><textarea name="description" id="description" class="text ui-widget-content ui-corner-all" rows="3" cols="40"></textarea></td></tr>
        <tr><td align="left">All Day Event:</td><td align="left"><input id="all-day" type="checkbox" value="false"></td></tr>
     </table>
     </div>
</div>

我还有以下 jQuery 代码：

jQuery("#dialog").dialog({
    autoOpen: false,
    height: 600,
    width: 700,
    modal: true,
    buttons: {
        'Create event': function () {
            name = jQuery("#name").val();
            jQuery(this).dialog('close');
        },
        Cancel: function () {
            jQuery(this).dialog('close');
        }
    },
    close: function () {
    }
});

我在我的 jQuery 代码中删除了一些东西，只是为了缩短 StackOverflow 的代码。该代码适用于 Chrome、Firefox、Safari 等，但由于某种原因，它仅在 IE8 中显示对话框形式。知道为什么它不会在 IE8 中隐藏表单吗？

【问题讨论】：

IE 8 不会在加载时隐藏它或在对话框中单击按钮时将其关闭？
@jk。它不会在加载时隐藏它
我在 IE8 和更早版本中也遇到了这个问题，当通过 $('<div></div>).appendTo(document.body) 插入 dialog 的元素时，它通过普通 JS 解决：var box = document.createElement('div'); document.body.appendChild(box);

标签： jquery internet-explorer jquery-ui dialog modal-dialog

【解决方案1】：

不久前我也遇到过同样的事情。这是您的确切 HTML 代码吗？如果没有，请确保不要在对话框 div 中使用自闭合标签。

 <div id="dialog-save">
    <div id="content" /> //this one didn't work.
    <div id="content"></div> //this one worked.
 </div>

出于某种原因，IE 不喜欢 jquery-ui 的自闭合标签。

【讨论】：

这是我的代码。你是说用第一个还是第二个？
@user1048676 我已经更新了答案。使用第二个。您是否有机会动态填写dialog-inner 中的内容？我的意思是你一开始有<div id="dialog-inner"/>，然后用数据填充div？
如果这不起作用，试试这个 - <div id="dialog" class="event-dialog" title="Create Event" style="display:none;"> 将 display 显式设置为 none。或者将display:none 移动到.event-dialog css 类中。
实际上由于某种原因它只有在我放入两个隐藏字段时才起作用。如果我添加这两个它不起作用。当我取出这两个时，它确实有效。
HTML 对这些字段无效。您没有关闭输入标签。

【解决方案2】：

我遇到了类似的问题，但我的解决方案是另一个：在我的网站上有一些 Flash 对象。这些对象由 IE 永久呈现在前台。结果是，对话框出现在 flash 对象的后面，而我只看到没有对话框的锁屏。

我丑陋的解决方案：我在显示对话框之前隐藏了 Flash 对象。当对话框关闭时，我再次显示对象。这行得通。

【讨论】：

【解决方案3】：

在我的情况下，一个额外的关闭 div 会产生问题。

<div class="comment_video"  >
 // content
</div>
</div>  // this closing div is creating problem.

我已经删除了最后一个额外的关闭 div，它工作正常。看起来 IE 8 对 HTML 标准非常严格

我希望它有所帮助。

【讨论】：

您是否有任何迹象表明问题是一个额外的、关闭的 div 标签？
这可能对原来的人没有帮助，但这是同样的事情发生在我身上的原因

【解决方案4】：

我通过添加带有 jQuery 的 CSS 类发现了同样的错误：

jQuery( "#dialog-noresult" ).dialog({
    modal: true,
    autoOpen: false,
    width: 500,
    height: 630,
    buttons: {
        "Cancel": {
             text: 'Cancel',
             class: 'dialog_Cancel',
             click: function() {
                 jQuery( this ).dialog( "close" );
             }
    }, ...
});

我通过在类选项中添加引号来解决它。

"class":'dialog_Cancel',

【讨论】：