jquery dialog auf den button klicken

Ich versuche ein jquery-dialog zu starten, auf einen button klicken, aber scheint nicht zu funktionieren. Jede Hilfe würde geschätzt:

JS:

    $('#wrapper').dialog({
        autoOpen: false,
        title: 'Basic Dialog'
    });
    $('#opener').click(function() {
        $(this).dialog('open');
        return false;
    });

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button id="opener">Open the dialog</button>
    <div id="wrapper">
    <p>Some txt goes here</p>
    </div>

Dank!

InformationsquelleAutor user763460 | 2012-11-27
  1. 8

    Diese Zeile 

    $(this).dialog('open');  //this here corresponds to the #opener div

    soll 

    $('#wrapper').dialog('open');

    Auch extra Klammern }); .. Kann ignoriert werden, wenn das ist die schließende Klammer für DOM Ready-handler

    Überprüfen Fiddle

    • +1 @Sushanth! Das ist die Antwort.
    • gute Detektivarbeit. Sie entdeckt es. +1
    InformationsquelleAutor Sushanth --
  2. 2

    Sicherzustellen, dass Sie verweisen auf die jQuery-und jQueryUI-Bibliotheken, wie pro mein Beispiel unten.

    Versuchen Sie dies:

    <html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />

        <script type="text/javascript">
            $(document).ready(function() {

                $('#wrapper').dialog({
                    autoOpen: false,
                    title: 'Basic Dialog'
                });
                $('#opener').click(function() {
                    $('#wrapper').dialog('open');
//                 return false;
                });
            });
        </script>
    </head>
<body>

<button id="opener">Open the dialog</button>
<div id="wrapper">
    <p>Some txt goes here</p>
</div>
    InformationsquelleAutor cssyphus
  3. 1

    Versuchen, diesen code, es funktioniert für mich.

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script>
$(document).ready(function() {
  $(function() {
    console.log('false');
    $( "#dialog" ).dialog({
        autoOpen: false,
        title: 'Test'
    });
  });

  $("button").click(function(){
    console.log("click");
        $(this).hide();
        $( "#dialog" ).dialog('open');
    });
}); 
</script>
</head>
<body>
<button id="open">Open Dialog box</button> 
<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>
    InformationsquelleAutor Umar Asghar
Schreibe einen Kommentar