阅读 88

bootstrap模态框关闭事件(bootstrap弹出模态框)

当点击按钮时modal的位置看起来很不舒服, 解决办法总结有两:

1.使用modal 弹出事件方法;

从官方文档中可以了解到, modal组件有不少事件接口:

其中 “shown.bs.modal”可以在弹窗框出现后 做一些处理, 更改弹出框的样式当然是可以的:

该实现方式 弹出框是居中了, 但弹出时有一些迟疑后抖动到中部;不是特别理想, 接下来试试第二种方式;

2.修改bootstrap.js 源码;

带着问题读js库源码, 往往能学到不少知识;本着怎样让 modal组件自动居中目的, 开始跟踪组件弹窗时对应的事件;

打开bootstrap.js ctrl+f 找到 modal对应代码:

弹出框出现时, 调用的自然是 Modal.prototype.show() 方法, 而show 方法中又调用了 that.adjustDialog() 方法:

以上代码看来,官方要实现 垂直居中简直太容易, 而他们没有, 只能说国外同行网站布局观跟俺们还是有区别的。加上少量代码:

Modal.prototype.adjustDialog = function () {

var modalIsOverflowing=this.$element[0].scrollHeight> document.documentElement.clientHeight

this.$element.css({

paddingLeft:!this.bodyIsOverflowing&&modalIsOverflowing?this.scrollbarWidth:”,

paddingRight: this.bodyIsOverflowing &&!modalIsOverflowing?this.scrollbarWidth:”

})

// 是弹出框居中…

var $modal_dialog = $(this.$element[0]).find(‘ .modal-dialog’ );

var m_top = ( $(document).height() – $modal_dialog.height() )/2; $modal_dialog.css({‘margin’ : m_top + ‘px auto’});

}

然后就实现modal垂直居中了, 效果图:

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐