Why is this jQueryUI dialog not working in IE9?
Question
The following code produces the expected jQueryUI modal popup dialog in Firefox, Chrome, and Opera. However, it fails in 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. Is there anything that I am missing?
EDIT : Code updated to closer to production code.
Thanks.
4 answers
solution1
10 ACCPTED 2012-02-03 00:21:31
you problem is the trailing "," IE doesn't like it
$( "#AddUser" ).dialog({
autoOpen: false, modal: true >>,<<
});
this will work:
$( "#AddUser" ).dialog({
autoOpen: false, modal: true
});
solution2
5 2012-02-03 00:43:40
Try to add DOCTYPE in the html file. <!DOCTYPE HTML>
solution3
1 2012-02-13 15:22:34
Ok, this is just a guess, but type="submit" sometimes is weird on ie...
have you tried: <button id="AddUserButton">AddUser</button>
also i would call "preventDefault" as last action inside the action listener.
solution4
0 2017-03-29 12:44:13
I had the same issue with dialog and adding following in css file did the job for me.
.ui-widget-overlay
{
z-index: 0 !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.