关于模态关闭的警告

Question

在一个页面上,我将有一个带有一个表单的bootstrap模式,这个表单不需要一次性填充.

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

Answer 1

假设你有2个模态

1. 一个用于表单(第一个模态),第二个用于警告关闭模态(两个模态)

2. 并使用bootstrap默认模态行为data-toggle并data-target调用第一个模态(带表单)

重要:

1. 确保添加data-backdrop="static"并data-keyboard="false"使用Form Modal触发按钮,以便在模态外单击时不会关闭,否则整个解决方案都无用.

2. 确保添加data-backdrop="false"警告模态,因此第一个模态只有一个后退.

变化:

1. data-dismiss="modal"从Close Button表单模式的页眉/页脚中删除

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

3. closefirstmodal在Form Modal Header/Footer中添加类以Close button使用jQuery click函数和bootstrap模态事件监听器调用警告模式

4. confirmclosed在警告模态中添加类,Confirm close Button用于通过jQuery单击功能关闭表单/警告模式并通过jQuery隐藏两个模态$('#Modalselector').modal('hide')

Modal的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与BS模态事件监听器(您可以跳过事件监听器,但我更喜欢这种方式)

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

小提琴示例-1

没有BS模态事件监听器的JS

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

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

小提琴示例-2