模态关闭警告

Question

在一个页面上，我将有一个 bootstrap 模态框，其中的表格不需要一次性全部填写。

有没有一种方法，当用户点击模式上的关闭按钮时，弹出一个警告窗口，确认关闭和取消关闭？

Answer 1

假设你有 2 个模态

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

重要提示：

确保在 Form Modal 触发按钮中添加 data-backdrop="static" 和 data-keyboard="false"，这样当在模态外单击时它不会关闭，否则整个解决方案是无用的。
确保在警告模态中添加 data-backdrop="false"，这样第一个模态将只有一个背景。

变化：

从 Form Modal

Close Button

data-dismiss="modal"

将 data-dismiss="modal" 添加到警告模式 Cancel Close button 只是为了关闭警告模式
在 Form Modal Header / Footer Close button 添加 class closefirstmodal 以使用 jQuery click function and bootstrap modal event listener
[= 调用警告模式76=]
在 Warning Modal Confirm close Button 中添加 class confirmclosed 这将使用 jQuery click function 关闭 Form / Warning Modals 并通过隐藏两个 Modal 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>

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

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

模态关闭警告

Warning on modal close

warnings

modal-dialog

bootstrap-modal