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

Question

I have one modal code and modal-opener link.我有一个模态代码和模态开启器链接。

When I click on the link modal opens and JavaScript in the back makes Ajax request and populates element values inside modal.当我单击链接模态打开时，后面的 JavaScript 会发出 Ajax 请求并填充模态内的元素值。

That works fine.这很好用。

However I have a need to generate modal-opener link inside modal dialog which opens up that very same modal again.但是我需要在模态对话框中生成模态开启器链接，它会再次打开相同的模态。
I want to open another window so that this new window overlaps first window.我想打开另一个窗口，以便这个新窗口与第一个窗口重叠。 So two (or more) open pop-up's of the same modal.因此，两个（或更多）打开相同模式的弹出窗口。

First when I generated the modal-opener link in the modal window, link was dead.首先，当我在模态窗口中生成 modal-opener 链接时，链接已失效。

Than I removed data-toggle="modal" from modal-opener link and put this jQuery code to listen and open modal when link is clicked:比我从 modal-opener 链接中删除了data-toggle="modal"并在单击链接时将此 jQuery 代码用于侦听和打开模态：

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

This works but not the way I want.这有效，但不是我想要的方式。

It opens original modal and link is there, when I click that link to open another window browser opens another modal dialog but original modal dialog disappears.它打开原始模态并且链接在那里，当我单击该链接打开另一个窗口浏览器打开另一个模态对话框但原始模态对话框消失。

So the question is: can I have two or more open windows of the same modal?所以问题是：我可以打开两个或多个相同模态的窗口吗？
One modal code, multiple open dialog instances.一个模态代码，多个打开的对话框实例。

All the examples I have looked at are where two different modals are open.我看过的所有示例都打开了两个不同的模态。
I'm asking about same modal and more dialogs open at the same time.我问的是相同的模态和同时打开的更多对话框。 Basically open the modal from within modal.基本上从模态内打开模态。

Same modal.同模态。

Thanks.谢谢。

Answer 1

I have found solution to this so I'll answer my own question in case anyone wants to know.我已经找到了解决方案，所以我会回答我自己的问题，以防万一有人想知道。

The key to the whole thing is jQuery clone() function.整个事情的关键是 jQuery clone()函数。

Basically you work with two DOM objects:基本上你使用两个 DOM 对象：

1 - Link which opens a modal - has "class" named modal_details_opener 1 - 打开模态的链接 - 具有名为modal_details_opener “类”
2 - Modal HTML itself - main <div> has "id" named modal_details 2 - 模态 HTML 本身 - 主<div>具有名为modal_details “id”

First you will need JavaScript callback function, I will call it a callback() .首先你需要 JavaScript 回调函数，我称之为callback() 。

So in global scope at the end of the .js file or when document is ready, you register callback() when link which opens modal is clicked:因此，在 .js 文件末尾或文档准备就绪时的全局范围内，单击打开模态的链接时注册callback() ：

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

Remember modal body has links inside itself which open that same modal.请记住，模态体内部有链接，可以打开相同的模态。
So inside callback() body we have to:所以在callback()主体中，我们必须：

1 - Find the modal on the document 1 - 在文档上找到模态
2 - Clone it 2 - 克隆它
3 - Modal inside it's body has links which open that same modal again, find those links and recursively bind callback() function on their "click" event 3 - 其主体内的模态具有再次打开相同模态的链接，找到这些链接并在其“单击”事件上递归绑定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);
}

Notice you have to pass cloned modal as a context to the $() function to isolate only to the links that are in each open modal clone.请注意，您必须将克隆的模态作为上下文传递给$()函数，以仅隔离到每个打开的模态克隆中的链接。

Answer 2

The following code will answer your problem.以下代码将回答您的问题。 If it does not work , please let me know I will think in another way.如果它不起作用，请让我知道我会以另一种方式思考。

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Large Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a large modal.</p>
           <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">ClickForAnotherModel</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Another Modal</h4>
        </div>
        <div class="modal-body">
          <p>This is Another Modal on Modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-09-20 16:17:03

解决方案2
-1 2015-09-01 19:19:56

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-09-20 16:17:03

解决方案2 -1 2015-09-01 19:19:56

解决方案1
2 已采纳 2015-09-20 16:17:03

解决方案2
-1 2015-09-01 19:19:56