单击按钮时的 jquery 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13592408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery dialog on button click
提问by user763460
I'm trying to get a jquery dialog to launch on a button click but does not seem to be working. Any help would be appreciated:
我正在尝试让 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>Thanks!
谢谢！
回答by Sushanth --
This line
这条线
$(this).dialog('open'); // this here corresponds to the #opener div
supposed to be
应该是
$('#wrapper').dialog('open');
Also extra braces });.. Can be ignored if this is the closing brace for DOMReady handler
还有额外的大括号});.. 如果这是DOMReady 处理程序的右大括号，可以忽略
回答by cssyphus
Ensure you are referencing the jQuery and jQueryUI libraries, as per my example below.
按照我下面的示例，确保您正在引用 jQuery 和 jQueryUI 库。
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>
回答by Umar Asghar
Try this code, it works for me.
试试这个代码，它对我有用。
<!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>
