bootstrap modal框的事件监控

拼搏现实的明天。 2022-11-27 03:21 229阅读 0赞

## bootstrap的模态框Modal经常会对其事件进行监控 ##

--------------------

模态框代码：

<div class="modal fade" id="deleteGridDataConfirmModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content message_align">
                <div class="modal-header ">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p>删除后数据不可恢复，确定删除所勾选记录吗？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                            id="deleteGridDataBtn" onclick="deleteGridData();">确认</button>
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">取消</button>
                </div>
            </div>
            
        </div>
    </div>

--------------------

## **事件：** ##

### 1、**show.bs.modal**，当 show 实例方法被调用之后，此事件被立即触发。 ###

//id选择器选中modal框
    $('#modal').on('show.bs.modal', function () {
      // 执行一些动作...
    })

--------------------

### 2、shown.bs.modal，当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 ###

$('#modal').on('shown.bs.modal', function () {
      // 执行一些动作...
    })

--------------------

### 3、hide.bs.modal，当调用 hide 实例方法时触发。 ###

$('#modal').on('hide.bs.modal', function () {
      // 执行一些动作...
    })

--------------------

### 4、hidden.bs.modal，当模态框完全对用户隐藏时触发。 ###