首页 > 作文

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

更新时间:2023-04-05 09:29:38 阅读: 评论:0

当点击按钮时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.adjus乘法分配律教案tdialog = 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垂直居中了, 效果图:

本文发布于:2023-04-05 09:29:37,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/1552a2af585edcbbd6ab40954a826485.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:bootstrap模态框关闭事件(bootstrap弹出模态框).doc

本文 PDF 下载地址:bootstrap模态框关闭事件(bootstrap弹出模态框).pdf

标签:弹出   方法   组件   事件
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图