Close internal modal bootstrap without closing external mode

2

I created a form using the Bootstrap Framework that opens in a Modal and it has a list of data that can be deleted, but require a confirmation.

It happens that by clicking the "Exit" button or the "x" of the confirmation modal, both it and the external modal closes.

In my case, one modal must be inside the other, and the examples that I found working modal are independent, such as in this example .

How can I do this?

My modal:

<div class="container">
    <h3>Modal Example</h3>
    <!-- Button to trigger modal -->
    <div>
        <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
    </div>

    <!-- MODAL EXTERNO -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>First Modal</h3>
        </div>
        <div class="modal-body">

            <!-- LINK QUE ABRE O MODAL INTERNO -->
             <a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch Second Modal</a>

                <!-- MODAL INTERNO -->                
                 <div id="myModal2" class="modal multi hide" tabindex="-1" role="dialog">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="multi" aria-hidden="true">×</button>
                        <h3>Second Modal</h3>
                    </div>
                    <div class="modal-body">


                     </div>
                     <div class="modal-footer">
                         <button class="btn" data-dismiss="multi" aria-hidden="true">Close</button>
                         <button class="btn btn-primary">Save changes</button>
                     </div>
                  </div>                 

        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
    
asked by anonymous 15.07.2014 / 02:55

1 answer

2

After a few days the solution:

Change the parameter data-dismiss to any name other than modal so that the modal parent is not closed when you click "Exit" or "x".

            <!-- MODAL INTERNO -->                
             <div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
                <div class="modal-header">
                    <button type="button" class="close-modal" data-dismiss="xmodal" aria-hidden="true">×</button>
                    <h3>Second Modal</h3>
                </div>
                <div class="modal-body">


                 </div>
                 <div class="modal-footer">
                     <button class="btn" data-dismiss="xmodal" aria-hidden="true">Close</button>
                     <button class="btn btn-primary close-modal">Save changes</button>
                 </div>
              </div>     

Include class close-modal and apply jquery below:

$('.close-ambiente').click(function() { 
    $('#modal2').modal('hide');
  }); 
    
19.07.2014 / 23:15