为什么这个jQueryUI对话框在IE9中不起作用？

Question

The following code produces the expected jQueryUI modal popup dialog in Firefox, Chrome, and Opera. 以下代码在Firefox，Chrome和Opera中生成预期的jQueryUI模式弹出对话框。 However, it fails in Internet Explorer 9: 但是，它在Internet Explorer 9中失败：

<html><head>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function() {
    $( "#AddUser" ).dialog({
        autoOpen: false, modal: true, height: 'auto', width: 400,
        buttons: {
            "Add": function() {
                alert("Add one!");
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#AddUserButton" ).button().click(function(event) {
        event.preventDefault();
        $( "#AddUser" ).dialog( "open" );
    });


});
</script>

</head><body>

<div id="AddUser" title="Add User">Popup content here</div>
<input type="submit" id="AddUserButton" />

</body></html>

In IE 9 the #AddUser div is not a jQueryUI dialog. 在IE 9中，＃AddUser div不是jQueryUI对话框。 Is there anything that I am missing? 有什么我想念的吗？

EDIT : Code updated to closer to production code. 编辑：代码更新，以更接近生产代码。

Thanks. 谢谢。

Answer 1

you problem is the trailing "," IE doesn't like it 你的问题是尾随“，”IE不喜欢它

 $( "#AddUser" ).dialog({
                   autoOpen: false, modal: true >>,<<
            });

this will work: 这将工作：

 $( "#AddUser" ).dialog({
                   autoOpen: false, modal: true
            });

Answer 2

Try to add DOCTYPE in the html file. 尝试在html文件中添加DOCTYPE。 <!DOCTYPE HTML>

Answer 3

Ok, this is just a guess, but type="submit" sometimes is weird on ie... 好吧，这只是一个猜测，但是类型=“提交”有时候很奇怪，即......

have you tried: <button id="AddUserButton">AddUser</button> 你尝试过： <button id="AddUserButton">AddUser</button>

also i would call "preventDefault" as last action inside the action listener. 我还会将“preventDefault”称为动作侦听器中的最后一个动作。

Answer 4

I had the same issue with dialog and adding following in css file did the job for me. 我在对话框中遇到了同样的问题，并在css文件中添加以下内容为我完成了这项工作。

.ui-widget-overlay
{
        z-index: 0 !important;   
}

为什么这个jQueryUI对话框在IE9中不起作用？

问题描述

4 个解决方案

解决方案1
10 已采纳 2012-02-03 00:21:31

解决方案2
5 2012-02-03 00:43:40

解决方案3
1 2012-02-13 15:22:34

解决方案4
0 2017-03-29 12:44:13

为什么这个jQueryUI对话框在IE9中不起作用？

问题描述

4 个解决方案

解决方案1 10 已采纳 2012-02-03 00:21:31

解决方案2 5 2012-02-03 00:43:40

解决方案3 1 2012-02-13 15:22:34

解决方案4 0 2017-03-29 12:44:13

解决方案1
10 已采纳 2012-02-03 00:21:31

解决方案2
5 2012-02-03 00:43:40

解决方案3
1 2012-02-13 15:22:34

解决方案4
0 2017-03-29 12:44:13