Boostrap modal 模态框 显示-监听弹出监听关闭事件

组件来源于web网站模板-osam-multipurpose-bootstrap4-admin-dashboard-cleanmodern-uikit_NWQ0MjdhNjBhYWM0YWEwMDQ5MWI3NzBj.zip

html

//点击按钮回弹出模态框
<button id="imgShowBtn" hidden style="float: right;margin: -35px 0px 5px 0px;" 
        data-toggle="modal" data-target=".imageModal" type="button" 
        class="btn btn-sm btn-primary btn-round dropify-clear">预览
</button>
//modal 弹出层 
<div class="modal  fade imageModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
        {{/*<div class="modal fade Account-Recharge-modal show" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="padding-right: 19px; display: block;">*/}}
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <img width="100%" height="100%" id="imgShow" src="">
            </div>
        </div>
    </div>

js

  //监听模态框弹出
  $('.modal').on('show.bs.modal', function () {
      //先判断当前操作
      console.log("模态框放行");
      return true;
      //console.log("模态框不放行");
      //return false;
   })

//监听模态框关闭
$('.model').on('hide.bs.modal', function () {
  alert('模态框关闭了');
});

modal 其他事件

上图来源于网络