Bootstrap dynamic management modals

Question

Is it possible manage multiple bootstrap modals within the same Window, with different actions, but with similar content in other divs?

To explain better: I'm using jQuery UI Tabs to control the workspace of the system I'm working on. So when you click on a menu item, a new tab opens with the content.

The thing is: I have two tabs with some options, and each tab has their own bootstrap modals.

When both tabs are opened, one random of them can't open a respective modal (just appears the modal-backdrop div).

Each modal has a different ID.

To control what every modal do while opened, I tried to use the following script:

 $(document).ready(function() {
     $('#MYMODAL_ID').modal('hide');
     $('.edit_user_btn').live("click", function() {
         FRMUPDPROFILE_profilesid = $(this).attr("value");
         $('#MYMODAL_ID').modal('show');
         $('input[name=FRMUPDPROFILE_profileID]').val(FRMUPDPROFILE_profilesid);
     })
 });

I need to control each modal, with a independent state (fade in or fade out), the way have no conflict between all of them.

The modal call is:

$('.edit_user_btn').live("click", function() {

If I has 5 modals, they have to open, work and close, in a independent mode, because as I said every modal has a unique ID.

I'm using Bootstrap 3.0

Any help will be appreciated!

Answer 1

If I understand the problem I think you just need a unique way to call them. Assuming your tabs does not work with ajax, predefine all your 5 modals then in your links add a custom attribute called modal_id (for example) and have the value be the unique ID for the modal, like this:

<!-- Modals links - can be anywhere -->
<a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_1">Edit link for 1</a>
<a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_2">Edit link for 2</a>

<!-- modal 1 -->
<div id="MYMODAL_1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Modal 1 header</h3>
    </div>
    <div class="modal-body">
        <p>modal 1 content here…</p>
        <a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_2">Edit link for 2</a>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>
</div>

<!-- modal 2 etc -->
<div id="MYMODAL_2" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Modal header 2</h3>
    </div>
    <div class="modal-body">
        <p>modal 2 content here…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>
</div>

Then the follow jQuery will call the right modal every time from anywhere

$('.edit_user_btn').click(function(){
    var modal_id = $(this).attr('modal_id');
    $("#" + modal_id).modal({show:true})
});

Hope it helps