在按钮单击时创建多个实例 jQuery UI 对话框答案

【问题标题】：Create multiple instance jQuery UI dialog on button click在按钮单击时创建多个实例 jQuery UI 对话框
【发布时间】：2016-05-06 03:55:47
【问题描述】：

我想创建多个实例 jQuery Dialog UI。我还想创建具有相同标题的每个 jQuery Dialog UI 的多个克隆。

如果我单击打开对话框 1，则基本对话框 1 将打开。如果我再次单击打开对话框 1，它应该生成具有相同标题的基本对话框 1 的克隆。

如果我单击打开对话框 2。然后基本对话框 2 将打开。如果我再次单击打开对话框 2，它应该生成具有相同标题的基本对话框 2 的克隆。

现在应该在屏幕上看到四个对话框。

例子：

1) 同样在 Windows 中，我们可以多次打开“这台电脑”。
2) 文件资源管理器多次。

$(function() {
  $('.dialog').dialog({
    autoOpen: false
  });
  $('.opener').click(function() {
    var d = $('.dialog').clone().appendTo('body'),
      tab = $(this).attr('alt') - 1;
    d.dialog({
      autoOpen: false,
      close: function(e, ui) {
        $(this).dialog('destroy').remove();
      }
    });
    console.log(tab);
    d.find('.dtabs').tabs({
      active: tab
    });
    d.dialog('open');
    $(this).data('id');
  });
});

<div class="dialog" id="dialog1" title="Basic dialog 1">
</div>
<div class="dialog" id="dialog2" title="Basic dialog 2">
</div>
<div class="dialog" id="dialog3" title="Basic dialog 3">
</div>
<input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" />
<input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" />
<input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" />

【问题讨论】：

标签： javascript jquery html jquery-ui jquery-ui-dialog

【解决方案1】：

你可以使用data()方法找到目标对话，然后克隆，如下图：

$(function() {
  $('.opener').click(function() {
    var targetSelector = $(this).data('id');
    var $target = $(targetSelector);
    var d = $target.clone().appendTo('body');
    d.dialog({
      close: function(e, ui) {
        $(this).dialog('destroy').remove();
      }
    });
  });
});

#dialog1,
#dialog2,
#dialog3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<div class="dialog" id="dialog1" title="Basic dialog 1"></div>
<div class="dialog" id="dialog2" title="Basic dialog 2"></div>
<div class="dialog" id="dialog3" title="Basic dialog 3"></div>
<input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" />
<input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" />
<input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" />

【讨论】：