在引导程序中触发两个模态时如何关闭其中一个模态答案

【问题标题】：how to dismiss one of the modal, when triggered two modal in the bootstrap在引导程序中触发两个模态时如何关闭其中一个模态
【发布时间】：2017-09-29 07:08:12
【问题描述】：

我的表单中有两个模态，我想做的是，当我创建一个弹出模态供用户创建活动时，我想在创建活动时弹出另一个模态让他们再次确认。但是，当我在那里触发确认模式上的取消按钮时，它会自动关闭所有模式。

以下是我的是非模态。

<div class="modal fade stick-up CampaignYesNoModal" tabindex="-1" role="dialog" aria-labelledby="CampaignYesNoModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">

        <div class="modal-content text-center">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="pg-close fs-14 "></i>
                </button>
                <h5 id="messageBox2" class="text-center" style="font-size:14px">Create Campaign?</h5>
            </div>
            <div class="modal-footer" style="text-align: center !important">

                <button type="submit" class="btn btn-primary " id="modalYesBtn2" name="modalYesBtn2" style="width:80px">Yes</button>
                <button type="button" class="btn btn-default " data-dismiss="modal" style="width:80px">Cancel</button>
            </div>
        </div>
    </div>
</div>

当我取消时，它会取消模态的启动，如何防止它发生？

【问题讨论】：

你是如何取消它的？
@HimanshuUpadhyay 你看到源代码有取消按钮

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

你只需要重新配置data-dismiss按钮。

我已将继续按钮配置为继续并关闭两个模式和取消按钮以仅关闭确认模式。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Begin Your Campaign</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Campaign Manager</h4>
      </div>
      <div class="modal-body">
        <p>Some input to take data here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#CampaignYesNoModal">Proceed</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade stick-up CampaignYesNoModal" tabindex="-1" role="dialog" aria-labelledby="CampaignYesNoModal" id="CampaignYesNoModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content text-center">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="pg-close fs-14 "></i>
                </button>
                <h5 id="messageBox2" class="text-center" style="font-size:14px">Create Campaign?</h5>
            </div>
            <div class="modal-footer" style="text-align: center !important">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" data-dismiss="modal" style="width:80px">Create</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
            </div>
        </div>
    </div>
</div>

【讨论】：

我已将data-toggle 属性添加到进程中，因此它会关闭（切换）第一个模态，而data-dismiss 会关闭第二个模态。

【解决方案2】：

好的，有办法做到这一点：

首先，为两种模式更改如下所述的关闭标签：

<button type="button" class="close">    // Notice that I have removed `data-dismiss="modal" aria-hidden="true" so it will not close any modal`
    <i class="pg-close fs-14 "></i>
</button>

然后，编写jquery代码只关闭相应的模态，

$(document).ready(function(){
    $('.close').parents('.modal:first').hide();
});

上述代码只会关闭相关的模态。

【讨论】：