javascript - Bootstrap Modal - 相同的模式多个打开的对话框

Question

我有一个模态代码和模态开启器链接。

当我点击链接时，模式打开，后面的 JavaScript 发出 Ajax 请求并填充模式内的元素值。

这很好。

但是我需要在模态对话框中生成模态开启器链接，它会再次打开完全相同的模态。
我想打开另一个窗口，以便这个新窗口与第一个窗口重叠。因此，两个(或更多)打开同一模式的弹出窗口。

首先，当我在模态窗口中生成模态开启器链接时，链接已失效。

然后我从 modal-opener 链接中删除了 data-toggle="modal" 并将这个 jQuery 代码放在点击链接时监听和打开模式:

$(".modal_order_details_opener").click(function () {
    $('#modal_order_details').modal('show');
});

这行得通，但不是我想要的方式。

它打开原始模态并且链接在那里，当我单击该链接打开另一个窗口时浏览器打开另一个模态对话框但原始模态对话框消失了。

所以问题是:我可以打开两个或多个相同模态的窗口吗？
一个模态代码，多个打开的对话框实例。

我看过的所有示例都是打开两个不同模态的地方。
我问的是相同的模式和同时打开的更多对话框。基本上从模态内打开模态。

相同的模式。

谢谢。

Answer 1

我已经找到了解决方案，所以我会回答我自己的问题，以防有人想知道。

整个事情的关键是 jQuery clone()功能。

基本上您使用两个 DOM 对象:

1 - 打开模式的链接 - 具有名为 modal_details_opener 的“类”
2 - 模态 HTML 本身 - 主要 <div>具有名为 modal_details 的“id”

首先您需要 JavaScript 回调函数，我将其命名为 callback() .

因此在全局范围内，在 .js 文件末尾或文档准备就绪时，您注册 callback()单击打开模态的链接时:

$('.modal_details_opener').click(callback);

请记住，模态主体内部有打开相同模态的链接。
所以里面callback() body 我们必须:

1 - 查找文档上的模态
2 - 克隆它
3 - 其主体内的模态框具有可再次打开相同模态框的链接，找到这些链接并递归绑定(bind) callback()在他们的“点击”事件上发挥作用

function callback() {
    // Find modal body on the document
    var $currentDetailsModal = $('#modal_details');

    // Clone modal and save copy
    var $cloneDetailsModal = $currentDetailsModal.clone();

    // Find links in this modal which open this modal again and bind this function to their click events
    $(".modal_details_opener", $cloneDetailsModal).click(callback);
}

请注意，您必须将克隆的模态作为上下文传递给 $()函数仅隔离每个打开模式克隆中的链接。