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.

Solution

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.

Comments

[toni rmc]

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.