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