twitter-bootstrap - Handle multiple remote modal calls

Question

I would like to open (and close!) a modal with remote content, called by a model with remote content. Unfortunatelly when closing the "inner" modal, both modals are closed.

So what I practically do is the following:

The index.html file looks like this:

<div class="container">
    <h2>Modal example</h2>
        <a data-toggle="modal" href="#" data-target="#firstmodal"
            class="btn btn-primary btn-large">Launch modal</a>

    <div id="firstmodal" class="modal" tabindex="-1" style="display: none;" data-remote="/link/to/remote.html">
        <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal">×</button>
            <h3 id="firstModalLabel">First Modal</h3>
        </div>
        <div class="modal-body">Actual edit stuff</div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button> 
            <button id="save_btn" class="btn btn-primary">Save changes</button></div>
    </div>
</div>

The called remote.html is the following:

<p>
      <a data-toggle="modal" href="#" data-target="#secondmodal"
             class="btn btn-primary btn-large">Drück mich.</a>
</p>

<div id="secondmodal" data-target="/linkt/to/no_interaction.html" class="modal"     tabindex="-1" style="display: none; ">
    <div class="modal-header">
            <button class="close" type="button"    data-dismiss="modal">×</button>
                <h3 id="secondModalLabel">second header</h3>
    </div>
    <div class="modal-body">Actual edit stuff</div>
    <div class="modal-footer">`enter code here`
        <button class="btn" data-dismiss="modal">schließen</button> 
        <button id="save_btn" class="btn btn-primary">speichern</button
    </div>
    </div>
</div>

And no_interaction.html looks like this:

<div><p>Hello</p></div>

Again my problem: When I close the second (inner) modal, the first modal will also be closed too. Is it, because all the code from the second modal is placed within the

<div class="modal-body">Actual edit stuff</div>

of the first modal? Is there a workaround? Or is it just my mistake? ;-)

Thanks in advance,

Peter

Answer 1

When using example code from bootsrap all seems ok. I couldn't use remote on jsfiddle but it shouldn't affect behavior of modals.

http://jsfiddle.net/ZUVYU/1/

<a href="#myModal" role="button" class="btn" id="" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header 1</h3>

</div>
<div class="modal-body">
    <p>One fine body…&lt;/p> <a href="#myModal2" role="button" class="btn" id=""
    data-toggle="modal">Launch demo modal</a>

</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="myModalLabel">Modal header 2</h3>

    </div>
    <div class="modal-body">
        <p>One fine body 2...</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

Answer 2

If You embed modal within modal You fouled automated modal dissmis and thus it closes both modals. You need manualy bind events to close specific modal.

Heres working fiddle, BUT!, You shoudn't embed modals in such way - it's bad design! http://jsfiddle.net/ZUVYU/3/

<a href="#myModal" role="button" class="btn" id="toggle">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <h3 id="myModalLabel">Modal header 1</h3>

</div>
<div class="modal-body">
    <p>One fine body…&lt;/p> <a href="#myModal2" role="button" class="btn" id="toggle2">Launch demo modal</a>

    <div
    id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close closemodal2" data-dismiss="" aria-hidden="true">×</button>
             <h3 id="myModalLabel">Modal header 2</h3>

        </div>
        <div class="modal-body">
            <p>One fine body 2...</p>
        </div>
        <div class="modal-footer">
            <button class="btn closemodal2" data-dismiss="" aria-hidden="true">Close</button>
        </div>
</div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

js: $('#myModal').modal({show:false}); $('#myModal2').modal({show:false});

$('#toggle').on('click', function () {
     $('#myModal').modal('show');    
});

$('#toggle2').on('click', function () {
     $('#myModal2').modal('show');
});

$('.closemodal2').on('click', function() {
    $('#myModal2').modal('hide');
});