Question

在一个页面上，我将有一个带有一个表单的引导模式，这个表单不需要一次性填充。

当用户点击模态上的关闭按钮时，是否有一种方法可以获得一个警告弹出窗口，确认关闭并取消关闭？

Answer 1

假设你有2个模态

一个用于表单（第一个模态），第二个用于警告关闭模态（两个模态）
并使用bootstrap默认模态行为data-toggle和data-target来调用第一个模态（带有表单）

重要提示：

确保在表单模态触发按钮中添加data-backdrop="static"和data-keyboard="false"，以便在模式外单击时不会关闭，否则整个解决方案都无用。
请务必在警告模式中添加data-backdrop="false"，以便第一个模态只有一个后退。

<强>的变化：

从表单模式的页眉/页脚data-dismiss="modal"中删除Close Button
将data-dismiss="modal"添加到警告模式Cancel Close button只是为了解除警告模式
在表格模态页眉/页脚closefirstmodal中添加课程Close button以使用jQuery click function和bootstrap modal event listener
在警告模式confirmclosed中添加类Confirm close Button，用于关闭带有jQuery click function的表单/警告模式，并通过jQuery隐藏两个模态$('#Modalselector').modal('hide')

模态的HTML

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Form" data-backdrop="static" data-keyboard="false">Open Modal</button>
<!-- Modal With Form -->
<div id="Form" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close closefirstmodal">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <p>Some Form Elements Here</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default closefirstmodal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal With Warning -->
<div id="Warning" class="modal fade" role="dialog" data-backdrop="false">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <p>This Is A Warning Message</p>
                <button type="button" class="btn btn-danger confirmclosed">Confirm Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel Close</button>
            </div>
        </div>
    </div>
</div>

JS与B.S模态事件监听器（您可以跳过事件监听器，但我更喜欢这种方式）

//jQuery and Bootstrap Lib's always comes first
$(document).ready(function () { //Dom Ready
    $('.closefirstmodal').click(function () { //Close Button on Form Modal to trigger Warning Modal
        $('#Warning').modal('show').on('show.bs.modal', function () { //Show Warning Modal and use `show` event listener
            $('.confirmclosed').click(function () { //Waring Modal Confirm Close Button
                $('#Warning').modal('hide'); //Hide Warning Modal
                $('#Form').modal('hide'); //Hide Form Modal
            });
        });
    });
});

Fiddle example-1

没有B.S模态事件监听器的JS

$(document).ready(function () {
    $('.closefirstmodal').click(function () {
        $('#Warning').modal('show');
    });

    $('.confirmclosed').click(function () {
        $('#Warning').modal('hide');
        $('#Form').modal('hide');
    });
});

Fiddle Example-2

关于模态关闭的警告

1 个答案: