2012-02-03 18 views
6

Poniższy kod generuje oczekiwane okno modalne jQueryUI w Firefox, Chrome i Opera. Jednakże nie w Internet Explorer 9:Dlaczego to okno dialogowe jQueryUI nie działa w IE9?

<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> 

W IE 9 div #AddUser nie jest dialog jQueryUI. Czy jest coś, czego mi brakuje?

EDIT: Kod zaktualizowano, aby był bliższy kodowi produkcyjnemu.

Dzięki.

+0

jaki błąd dostałeś? –

+0

@NadirMuzaffar: element div jest wyświetlany na ekranie w prosty sposób. – dotancohen

+0

Czy używasz najnowszej wersji jquery/jqueryui? – tcao

Odpowiedz

10

Ci problemem jest wzdłużny "" IE nie podoba

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

to będzie działać:

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

Dziękuję, to naprawię to w kodzie, który opublikowałem! Jednak kod produkcyjny ma kilka innych funkcji i nie ma na nich przecinka końcowego. Zaktualizowałem kod w pytaniu. Dzięki. – dotancohen

+1

To okazało się całym światem bólu! Ale minęła mnie pierwsza przeszkoda. Dzięki! – dotancohen

+0

Wiele godzin straconych ... po prostu na przecinek ... Dziękujemy! – Bidou

5

Spróbuj dodać DOCTYPE w pliku html. <!DOCTYPE HTML>

+0

Dzięki, że w rzeczywistości był jednym z problemów. – dotancohen

1

Ok, to tylko przypuszczenie, ale type = "submit" czasami jest dziwne na IE ...

próbowałeś: <button id="AddUserButton">AddUser</button>

także nazwałbym "preventDefault" jako ostatni akcja wewnątrz detektora akcji.

+0

Dziękuję. Jednak problem został już rozwiązany, a IE okazało się być w porządku z kodem

0

Miałem ten sam problem z oknem dialogowym i dodawanie kolejnych w pliku css wykonało zadanie dla mnie.

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