按钮上的jquery对话框点击

我试图让一个jquery对话框在点击按钮上启动，但似乎没有工作。任何帮助，将不胜感激：按钮上的jquery对话框点击

$('#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>

谢谢！

来源

2012-11-27 user763460

此行

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

应该是

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

而且额外的括号}); ..如果这是DOM准备处理结束的括号可以忽略不计

Check Fiddle

来源

2012-11-27 20:27:09

+1 @Sushanth！这是答案。 – daniel0mullins

@Sushanth善于侦查。你发现了它。 +1 – gibberish

确保您引用了jQuery和jQueryUI库，如下面的示例所示。

试试这个：

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

来源

2012-11-27 20:31:04 gibberish

试试这个代码，它为我工作。

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

来源

2016-04-02 10:04:17

按钮上的jquery对话框点击

回答

相关问题