2017-09-11 1 views
0

Dieser Code sollte ein Dialogfeld erstellen, zeigt aber nur Text mit einer Schaltfläche SCHLIEßEN. Der Code stammt von der Jquery-Website.jQuery-Fenster erscheint nicht als codiert

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Dialog - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
     $("#dialog").dialog(); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <div id="dialog" title="Basic dialog"> 
 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
    </div> 
 
</body> 
 
</html>

+0

Haben Sie die Dateipfade überprüft? Zum Beispiel '/ resources/demos/style.css'? Gibt es das in Ihrer Struktur? – empiric

+1

Ich habe Ihren Code in ein ausführbares Snippet eingefügt. es scheint gut zu funktionieren. Bitte überprüfen Sie die Konsole auf Fehler –

+0

Ihr Code-Snippet ist es richtig rendern –

Antwort

0

Ihr Code scheint in meinem Browser (Safari 10.1.1) zu arbeiten. Versuchen Sie von hier aus (Oder JSFiddle) und/oder mit einem anderen Browser zu laufen. Code:

$(function() { 
 
    $("#dialog").dialog(); 
 
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="dialog" title="Basic dialog"> 
 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
</div>