Close internal modal bootstrap without closing external modal

Asked

Viewed 5,139 times

2

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

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

In my case necessarily one modal has to be inside the other, and the examples I found that work the modal’s are independent, as in this example.

How can I do it?

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>
jquery html twitter-bootstrap

  • By the answer to the OS question you got there you couldn’t? That’s what you want, right?

  • An idea: Instead of opening a second modal, which in my view seems a bad practice, by polluting the user’s screen too much, why not add a second confirmation button in the first modal? Ex: You click on the close, and give a .show() in a div with initial state in .hide() and within this div, a confirmation with two Buttons, if cancel, activates the .hide() again, if confirmed, use the script for the close modal. I’ve seen this on another site, because it doesn’t make much sense, call 2 modals...

  • Yes. I don’t intend to pollute the screen too much, but that’s more or less what you said I wanted to do. Inside the Modal will be displayed information that can be deleted but that requires confirmations by the user. But if I create a div for this, I will be, in a way, creating a confirmation "modal" with a different layout, which I also understand is not the best option. What I want is this http://jsfiddle.net/h3WDq/5/. but with one modal inside the other.

  • You can use this http://jakiestfu.github.io/Bootstrap-SubModal plugin I tried to do it the way you want, but it doesn’t work, or does it by javascript or uses this plugin

1 answer

2


After a few days the solution:

Change the parameter data-dismiss for any name other than modal so that the modal father not be closed when clicking on "Quit" 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 the class close-modal and apply jquery below:

$('.close-ambiente').click(function() { 
    $('#modal2').modal('hide');
  });

Browser other questions tagged jquery html twitter-bootstrap

You are not signed in. Login or sign up in order to post.