jquery Dialog auf Knopf klicken

Ich versuche, einen jquery Dialog zu erhalten, um auf einem Knopfklick zu starten, aber scheint nicht zu arbeiten. Jede mögliche Hilfe würde geschätzt:jquery Dialog auf Knopf klicken

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

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

Quelle

2012-11-27 user763460

Diese Linie

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

sollte

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

Auch zusätzliche Klammern }); .. ignoriert Kann sein, ob dies die schließende Klammer für DOM Bereit-Handler

ist Check Fiddle

Quelle

2012-11-27 20:27:09

+1 @Sushanth! Das ist die Antwort. – daniel0mullins

@Sushanth gute Detektivarbeit. Du hast es gesehen. +1 – gibberish

Stellen Sie sicher, dass Sie auf die jQuery- und jQueryUI-Bibliotheken verweisen, wie in meinem Beispiel unten.

Try this:

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

Quelle

2012-11-27 20:31:04 gibberish

diesen Code versuchen, es für mich funktioniert.

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

Quelle

2016-04-02 10:04:17

jquery Dialog auf Knopf klicken

Antwort

Verwandte Themen