CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
toni rmc
toni rmc

Reputation: 878

Bootstrap Modal - same modal multiple open dialogs

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.

Upvotes: 2

Views: 11668

Answers (2)

toni rmc
toni rmc

Reputation: 878

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.

Upvotes: 2

Raju
Raju

Reputation: 147

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>

Upvotes: -1

Related Questions