bootstrap弹出层的二种触及格局_javascript本事_脚本之家

金沙8331网址,bootstrap弹出层有二种接触格局,以下是自作者动用的二种办法:

1.主意一:button中属性触发

小心:button中的data-target内容应当和要和弹出层中的id保持一致
data-target=”#mymodal-data”——– id=”mymodal-data”

  修改     × Close  弹出层标题      关闭 保存   

2.方法二:通过js绑定

潜心:将button的id和弹出层的id分别赋给
$m_btn和$modal,当$m_btn被点击后$modal弹出。

 添加     × Close  弹出层标题   通过js绑定button和弹出层触发   关闭 保存    ${ // dom加载完毕 var $m_btn = $; //y-modalBtnAdd是button的id var $modal = $; //y-myModalAdd是弹出的遮罩层的id,通过这两个id进行绑定 $m_btn.on{ $modal.modal; }); }); 

3.主意三:点击表格一行,弹出弹出层

动态给tr标签加弹出的触发属性

one two three
four five six

× Close

弹出层标题

点击表格一行内容,弹出弹出层

关闭

保存

bootstrap的弹出层在总体显示屏的上半有个别,能够将它居中显得。

${ // dom加载完毕 var $m_btn = $; y-modalBtnAdd是button的id var $modal = $; y-myModalAdd是弹出的遮罩层的id,通过这两个id进行绑定 // 测试 bootstrap 居中 ,bootstrap的弹出层默认是左右居中,上下则是偏上,此代码将弹出层上下也居中了,但是会抖 动一下 $modal.on('shown.bs.modal', function(){ var $this = $; var $modal_dialog = $this.find; var m_top =  - $modal_dialog.height/2; $modal_dialog.css({'margin': m_top + 'px auto'}); }); });

如上便是本文的全部内容,希望对我们的读书抱有利于,也希望大家多多点拨脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注