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.
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
});
Try to add DOCTYPE in the html file. <!DOCTYPE HTML>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With