Question

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

所以我实际做的是以下内容：

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>

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

no_interaction.html 看起来像这样：

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

我的问题： 当我关闭第二个（内部）模态时，第一个模态也将关闭。是吗，因为第二个模态的所有代码都放在

中

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

的第一个模态？有解决方法吗？或者只是我的错误？ ; - ）

提前致谢，

彼得

Answer 1

使用bootstrap中的示例代码时，一切似乎都可以。我不能在jsfiddle上使用remote，但它不应该影响模型的行为。

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

如果你在模态中嵌入模态你会对自动模态dissmis进行犯规，因此它会关闭两个模态。你需要manualy绑定事件来关闭特定的模态。

Heres工作小提琴，但是！你不应该以这种方式嵌入模态 - 这是糟糕的设计！ 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…</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'）模态（{显示：假}）; $（ '＃myModal2'）模态（{显示：假}）;

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

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

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

处理多个远程模态调用

2 个答案: