javascript - 当 Bootstrap 中触发两个模态时，如何关闭其中一个模态

Question

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

以下是我的是否模式。

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

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

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