当点击按钮时modal的位置看起来很不舒服, 解决办法总结有两:
1.使用modal 弹出事件方法;
从官方文档中可以了解到, modal组件有不少事件接口:
其中 “shown.bs.modal”可以在弹窗框出现后 做一些处理, 更改弹出框的样式当然是可以的:
<script type=”text/javascript”>
$(function(){
// dom加载完毕
var $m_btn = $(‘#modalBtn‘);
var $modal = $(‘#myModal‘);
$m_btn.on(‘click‘, function(){
$modal.modal({backdrop: ‘static‘});
});
// 测试 bootstrap 居中
$modal.on(‘shown.bs.modal‘, function(){
var $this = $(this);
var $modal_dialog = $this.find(‘.modal-dialog‘);
var m_top = ( $(document).height() – $modal_dialog.height() )/2; $modal_dialog.css({‘margin‘: m_top + ‘px auto‘});
</script>
该实现方式 弹出框是居中了, 但弹出时有一些迟疑后抖动到中部;不是特别理想, 接下来试试第二种方式;
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垂直居中了, 效果图:
本文由知识库于2021-09-14发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/3591.html
上一篇scorm课件制作公司(scorm课件制作工具)
下一篇金蝶软件安装包如何安装(金蝶专业版安装步骤)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台