Javascript jquery对话框单击按钮打开新实例

我试图打开多个对话框窗口与每个按钮点击…我不能明白这一点，并已研究，但找不到任何信息

代码：

小提琴：

---

从小提琴我想发生的是，每个按钮点击打开一个单独的或新的jquery对话框窗口。。这是可能的吗？

单击时添加一个新的div，该div带有一个ividual ID，并显示一个对话框。（打开第二个时，移动它，因为它们彼此重叠）

$（'.dvclick'）。单击（函数（e）{
var title=$（this.attr（'id'）；
变量id='对话框'+'\'+标题；
$（'body'）.append（'这是div:'+id+''）；
$（“#”+id）.对话框({
宽度：200，
标题：标题
});
});

是的，您只需为要同时打开的每个窗口使用单独的窗口元素即可

当您要求将某个元素作为对话框打开时，它将被设置样式并显示，但再次显示它不能只是复制该元素。您最终会重新格式化相同的内容，但这实际上会删除上一个对话框

要使其正常工作，您可以将每个按钮链接到不同的元素，如：

   <button id='click1' class='dvclick' data-window='info_window1'>click1</button>
<button id='click2' class='dvclick' data-window='info_window2'>click2</button>
<button id='click3' class='dvclick' data-window='info_window3'>click3</button>

---

}))

您可以分离实例来创建jquery对话框，每个实例在单独的窗口中打开

$('.dvclick').click(function(e) {

   var title = $(this).attr('id');

    var $window =  $("#info_window" + title);

    //check if window exist 
    if($window.attr("id") == null)
    {
       //create an dummy window and append to body
       var $div = $("<div></div>");
       $div.attr("id",info_window" + title);
       $div.css("display","none");
       $("body").append($div);
    }

    $("#info_window" + title).dialog({
      width: 200,
      title: title
    });
});

$（'.dvclick'）。单击（函数（e）{
var title=$（this.attr（'id'）；
变量$window=$（“#信息窗口”+标题）；
//检查窗口是否存在
if（$window.attr（“id”）==null）
{
//创建一个虚拟窗口并附加到主体
变量$div=$（“”）；
$div.attr（“id”，信息窗口“+标题）；
$div.css（“显示”、“无”）；
$（“正文”）。追加（$div）；
}
$（“#信息窗口”+标题）。对话框({
宽度：200，
标题：标题
});
});

您将在下面找到一个动态解决方案。如果单击按钮，将延迟创建一个窗口

$（文档）.ready（函数（）{
$（'.dvclick'）。单击（函数（e）{
var title=$（this.attr（'id'）；
变量选择器='info_window'+title.replace（/[^\d]+//g'，）；
//创建窗口（如果尚未创建）。
if（$（'#'+选择器）.length==0）{
var newWindow=$（“#info_window”）.clone（）；
newWindow.attr（'id'，选择器）；
appendTo（$（'body'）；
}
$（'#'+选择器）.对话框({
宽度：200，
标题：标题
});
});
})；

信息

试验
点击1
点击2
单击3

无论是手动创建还是循环创建，都必须有多个div才能打开多个对话框。

   <button id='click1' class='dvclick' data-window='info_window1'>click1</button>
<button id='click2' class='dvclick' data-window='info_window2'>click2</button>
<button id='click3' class='dvclick' data-window='info_window3'>click3</button>

$('.dvclick').click(function(e) {

var title = $(this).attr('id');
var windowElem = $(this).data('window');

$("#" + windowElem).dialog({
    width: 200,
    title: title
});

$('.dvclick').click(function(e) {

   var title = $(this).attr('id');

    var $window =  $("#info_window" + title);

    //check if window exist 
    if($window.attr("id") == null)
    {
       //create an dummy window and append to body
       var $div = $("<div></div>");
       $div.attr("id",info_window" + title);
       $div.css("display","none");
       $("body").append($div);
    }

    $("#info_window" + title).dialog({
      width: 200,
      title: title
    });
});