Close internal modal bootstrap without closing external mode

Question

Close internal modal bootstrap without closing external mode

Navigation

#1 by (2 votes)

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>

html jquery twitter-bootstrap

asked by anonymous 15.07.2014 / 02:55

1 answer

Refresh in database Is it possible to display private videos through the Youtube API?

score 2 · Accepted Answer

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');
  });