jquery ui对话框在按钮和内容div上使用相同的类打开多个对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4518889/
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 ui dialog open multiple dialog boxes using the same class on the button and the content div
提问by MichaelAntoni
i want to open multiple dialog boxes by using the same class on both the button and the content div. The below works but only for the first time.
我想通过在按钮和内容 div 上使用相同的类来打开多个对话框。下面的工作，但只是第一次。
jQuery('.helpDialog').hide();
jQuery('.helpButton').click(function() {
jQuery(this).next('.helpDialog').dialog({
autoOpen: true,
title: 'Help',
width: 500,
height: 300,
position: [180,10],
draggable: true,
resizable: false,
modal: false
});
return false;
});
we know the reason for this http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/"the second call is ignored because the dialog has already been instantiated on that element."
我们知道这个http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/的原因 “第二个调用被忽略，因为对话框已经在那个元素。”
But when i fix that problem by trying the code below, the dialog box no longer opens. Can anyone help? Thanks in advance
但是当我通过尝试下面的代码解决这个问题时，对话框不再打开。任何人都可以帮忙吗？提前致谢
jQuery('.helpDialog').hide();
jQuery(function() {
jQuery('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
});
});
jQuery('.helpButton').click(function() {
jQuery(this).next('.helpDialog').dialog('open');
return false;
});
回答by Nick Craver
You actually need a different approach here, a non-intuitive one, like this:
您实际上需要一种不同的方法，一种非直观的方法，如下所示：
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
Why must you do this?because .dialog()moves the content it wraps in dialog elements to the end of the <body>, so .next()will no longer find it...by using jQuery.data()we're maintaining a reference to the dialog we want to open.
为什么你必须这样做？因为.dialog()将它包装在对话框元素中的内容移动到 的末尾<body>，所以.next()将不再找到它......通过使用jQuery.data()我们维护对我们想要打开的对话框的引用。
回答by Thomas
Maybe this code will help you.
也许这段代码会对你有所帮助。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener1").click(function () {
$("<div id='dialog1' />").dialog(
{
title: 'Basic modal dialog1',
autoOpen: false,
width: 600,
height: 400,
open: function (event, ui) {
}
});
$("#dialog1").dialog('open').show();
return false;
});
$("#opener2").click(function () {
$("<div id='dialog2' />").dialog(
{
title: 'Basic modal dialog2',
autoOpen: false,
width: 600,
height: 400,
open: function (event, ui) {
}
});
$("#dialog2").dialog('open').show();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener1">open the dialog1</button>
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>
回答by ravi kiran
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
