简述bootstrap弹出层的各种触发方法
来源：爱站网时间：2020-10-27编辑：网友分享
bootstrap中的模式框与工具是不一样的，而模态框以弹出对话框的形式出现，下面是爱站技术频道小编带来的简述bootstrap弹出层的各种触发方法，感兴趣的小伙伴们可以进入下文了解。
bootstrap中的模式框与工具是不一样的，而模态框以弹出对话框的形式出现，下面是爱站技术频道小编带来的简述bootstrap弹出层的各种触发方法，感兴趣的小伙伴们可以进入下文了解。
1.方法一：button中属性触发
注意：button中的data-target内容应该和要和弹出层中的id保持一致
data-target=”#mymodal-data”——– id=”mymodal-data”
结果：
2.方法二：通过js绑定
注意：将button的id和弹出层的id分别赋给 $m_btn和$modal，当$m_btn被点击后$modal弹出。
结果：
3.方法三：点击表格一行，弹出弹出层
动态给tr标签加弹出的触发属性
| 一 | 二 | 三 |
|---|---|---|
| one | two | three |
| four | five | six |
结果：
bootstrap的弹出层在整个屏幕的上半部分，可以将它居中显示。（方法二可以让弹出层居中显示）
$(function(){
// dom加载完毕
var $m_btn = $('#y-modalBtnAdd'); y-modalBtnAdd是button的id
var $modal = $('#y-myModalAdd'); y-myModalAdd是弹出的遮罩层的id，通过这两个id进行绑定
// 测试 bootstrap 居中 ，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'});
});
});
简述bootstrap弹出层的各种触发方法非常值得大家学习，这也是很多人选择爱站技术频道的原因，如果还有更多的知识可以直接来爱站技术频道哦。
上一篇：Vue中数据双向绑定的分析
