Twitter bootstrap 处理多个远程模式调用

我想打开（并关闭！）一个包含远程内容的模式，由一个包含远程内容的模型调用。不幸的是，当关闭“内部”模态时，两个模态都关闭了

因此，我实际上做了以下几点：

<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>

index.html文件如下所示：

<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>

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

模态示例
×
第一模态
实际编辑材料
接近
保存更改

调用的remote.html如下所示：

<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>

×
第二个标题
实际编辑材料
`在这里输入代码`
施利恩
speichern当使用bootsrap中的示例代码时，一切似乎都正常。我不能在JSFIDLE上使用remote，但它不应该影响modals的行为



×
模态头1
一个好身体…

接近
×
模式标题2
一个好身体2

接近
如果在modal中嵌入modal，则会破坏自动modal dissmis，从而关闭两个modal。您需要手动绑定事件以关闭特定模式

这是小提琴，但是！，你不应该以这种方式嵌入模态——这是糟糕的设计！

您应该使用JS手动完成，或者不使用；]刚刚检查了最近的引导，似乎还可以。请在下面的答案中进行修改。不幸的是，加载远程内容的结果是不同的。它将remote.html加载到中，而不是像您的示例中那样附加它。好的，但我的示例显示了您最初的问题modal inside modal的工作代码。我为modals中的modals找到了这个解决方案，就像您提出的一样。但这不是解决我问题的办法。我编辑了我的原始问题，希望我已经用更好的方式描述了这个问题。谢谢。这就是我一直在寻找的解决方法！我将试图找到一个解决方案，保持所有模态分离。
<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…</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>

<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…</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>

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

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

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