Bootstrap Modal - same modal multiple open dialogs

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.

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.

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_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.

possible duplicate of [Multiple modals overlay](http://stackoverflow.com/questions/19305821/multiple-modals-overlay) — mccannf, Sep 01 '15 at 17:05
This is not the same. Im asking about opening multiple windows od the SAME modal. What you linked is question how to overlay different modals. — toni rmc, Sep 01 '15 at 17:18
If I understand correctly, you want to launch multiple windows of same modal dialog but the data will be different on each dialog. Am I correct? — JGV, Sep 01 '15 at 17:45
Yes exactly. And problem is that I can get only one window at the time. — toni rmc, Sep 01 '15 at 17:48

score 2 · Accepted Answer · answered Sep 20 '15 at 16:17

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.

Basically you work with two DOM objects:

1 - Link which opens a modal - has "class" named modal_details_opener
2 - Modal HTML itself - main <div> has "id" named modal_details

First you will need JavaScript callback function, I will call it a 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:

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

Remember modal body has links inside itself which open that same modal.
So inside callback() body we have to:

1 - Find the modal on the document
2 - Clone it
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

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.

score -1 · Answer 2 · answered Sep 01 '15 at 19:19

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>

Thank you for your help but this is not it. You have two modals. What I want is just to have 1 modal (#myModal) and to open more windows at the same time of that same modal, where link is in the modal. To put it this way: modal contains link in its own body to open self again, where previous window stays open. — toni rmc, Sep 01 '15 at 21:49

Bootstrap Modal - same modal multiple open dialogs

2 Answers2