Mic*_*oni 5 jquery user-interface dialog multiple-instances
我想通过在按钮和内容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;
});
Run Code Online (Sandbox Code Playgroud)
我们知道这个http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/的原因, 第二个调用被忽略,因为对话框已经被实例化了那个元素."
但是,当我通过尝试下面的代码解决该问题时,对话框不再打开.有人可以帮忙吗?提前致谢
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;
});
Run Code Online (Sandbox Code Playgroud)
Nic*_*ver 21
你实际上需要一种不同的方法,一种非直观的方法,如下所示:
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;
});
});
Run Code Online (Sandbox Code Playgroud)
你为什么要这样做?因为.dialog()它将包含在对话框元素中的内容移动到结尾<body>,所以.next()将不再找到它...通过使用jQuery.data()我们维护对我们想要打开的对话框的引用.