All geek questions in one place

Why is this jQueryUI dialog not working in IE9?

The following code creates the expected jQueryUI modal popup dialog in Firefox, Chrome, and Opera. However, it does not work 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 something I am missing?

EDIT : code updated closer to production code.

Thanks.

+6
source share
4 answers

you have a problem with the final IE

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

this will work:

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

Try adding DOCTYPE to the html file. <!DOCTYPE HTML>

+5
source

Well, this is just an assumption, but type = "submit" is sometimes weird, i.e. ....

Have you tried: <button id="AddUserButton">AddUser</button>

I would also call "preventDefault" the last action inside the action listener.

+1
source

I had the same problem with the dialog box, and adding the following to the css file did the job for me.

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

Source: https://habr.com/ru/post/907533/

More articles:


All Articles