jQuery Bootstrap 多个模态，如何仅隐藏活动/顶部模态答案

【问题标题】：jQuery Bootstrap multiple modals, how to hide active/top modal onlyjQuery Bootstrap 多个模态，如何仅隐藏活动/顶部模态
【发布时间】：2013-07-29 20:18:35
【问题描述】：

我有一个模态表单，有时需要打开第二个模态来设置或显示一些数据。我可以启动第一个和第二个模态，但是当我关闭“顶部”模态时，两个模态都被隐藏了。是否可以一次隐藏一个模式？

显示模式一：

$('#content').on('click', "a#AddItemModal", function () {
    var id = $(this).attr('value');

    var val = '/AddItems/id:' + id;

    $('#addItemBody').load(val);
    $('#addItemModal').modal({});

});

模态一：

<div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog">
    <div class="modal-body">
        <p id="addItemBody"></p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn"  data-dismiss="modal" id="good">Close</a>
    </div>
</div>

显示模式二：

$('#test_embed').click(function () {
        var val = $('#formEmbed').val();
        $('#myModalLabel').html('Embed Preview');
        $('#embedBody').html(val);
        $('#embedModal').modal({});
    });

模态二：

<div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog">
    <div class="modal-header">
        <h3 id="myModalLabel">Embed Preview</h3>
    </div>
    <div class="modal-body">
        <p id="embedBody"></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

我通常确保第二个模态不是父模态中的子模态。因为data-dismiss="modal" 关闭了当前模态和所有父模态。

如果可能的话，那就去做吧：

<div class="modal fade" id="Model1" tabindex="-1" role="dialog">
</div>
<div class="modal fade" id="Model2" tabindex="-1" role="dialog">
</div>

没有

<div class="modal fade" id="Model1" tabindex="-1" role="dialog">
   <div class="modal fade" id="Model2" tabindex="-1" role="dialog">
   </div>
</div>

或者我删除data-dismiss="modal" 并为我想用来关闭模式的链接或按钮分配“关闭”类，然后使用一个 jquery 事件我可以关闭/隐藏关闭按钮模式。

 $('#mycontainer').on('click', '.modal .close', function () {
        $(this).closest('.modal').modal('hide');
    });

【讨论】：

我通常确保第二个模态不是父模态中的子模态。因为 data-dismiss="modal" 关闭了当前模态和所有父模态。 => 没错，谢谢
我选择了第二个选项，但是所有的模态都关闭了

【解决方案2】：

我认为您应该手动关闭模态，因为当您单击关闭按钮时，您会触发一个隐藏所有模态的“关闭”事件。要手动关闭模态，请为第一个模态调用 $('#addItemModal').modal('hide');，然后调用 $('#embedModal').modal('hide');。

现在您可以在模态中放置一个按钮来调用这些：

模态一：

<div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog">
    ...
    <div class="modal-footer">
        <a href="#" class="btn"  data-number="1" id="good">Close</a>
    </div>
</div>

模态二：

<div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog">
    ...
    <div class="modal-footer">
        <button class="btn" data-number="2">Close</button>
    </div>
</div>

Javascript：

$("button[data-number=1]").click(function(){
    $('#addItemModal').modal('hide');
});

$("button[data-number=2]").click(function(){
    $('#embedModal').modal('hide');
});

【讨论】：

这正是我一直在寻找的！它工作得很好，可以应用于多层模态。我喜欢它，谢谢！

【解决方案3】：

只需将您的模态附加到正文 - 在模态创建后

$('body').append('#addItemModal');

现在将只关闭活动的顶部模式

【讨论】：

【解决方案4】：

一个模态和三个选项卡

<div class="modal fade bd-example-modal-lg" id="QualityControlMeasurementModal" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-lg" style="min-width: 80rem;">    
        <div class="modal-content">    
          <div class="modal-header">
            <h5>...</h5>
          </div>
          <div class="modal-body">
            <div class="form-group  row">
              <div class="row col-12"> 
                <div class="col">
                  <button type="button" class="form-control btn btn-primary btn-lg ">...</button>
                </div>
                <div class="col">
                  <button type="button" class="form-control btn btn-success btn-lg">...</button>
                </div>
                <div class="col">
                  <button type="button"  data-dismiss="modal" class="form-control close btn-lg btn btn-danger"
                    style="background-color: #cc0000;" >...</button>
                </div>
              </div>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
              </div>
              <hr>       
         </div>
        </div>
       </div>
      </div>
     </div>

隐藏：(data-dismiss = modal)

【讨论】：