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

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

首先，为两个模态更改关闭标签，如下所述：

<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();
});

上述代码仅关闭相关模式。

Answer 2

您只需要重新配置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>

当引导程序

2 个答案: