modal-dialog - 模态关闭警告

Question

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

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

Answer 1

假设你有 2 个模态

一个用于表单(第一个模式)，第二个用于警告关闭模式(两个模式)

并使用引导默认模式行为 data-toggle和 data-target调用第一个模态(带表单)

重要提示:

确保添加 data-backdrop="static"和 data-keyboard="false"在 Form Modal 触发按钮中，因此在模态外部单击时它不会关闭，否则整个解决方案是无用的。

确保添加 data-backdrop="false"在警告模态中，因此第一个模态只有一个背景。

变化:

删除 data-dismiss="modal"来自页眉/页脚 Close Button模态

添加 data-dismiss="modal"到警告模式 Cancel Close button只是为了解除警告模式

添加类(class) closefirstmodal表单模态页眉/页脚 Close button使用 jQuery click function 调用警告模式和 bootstrap modal event listener

添加类(class) confirmclosed在警告模式中 Confirm close Button这将用于关闭两个表单/警告模式 jQuery click function并通过 jQuery 隐藏两个 Modal $('#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