bootstrap弹出层的多种触发方式


Posted in Javascript onMay 10, 2017

bootstrap弹出层有多种触发方式,以下是我用到的几种方式:

1.方法一:button中属性触发

注意:button中的data-target内容应该和要和弹出层中的id保持一致
data-target=”#mymodal-data”——? id=”mymodal-data”

<!--在button上绑定触发弹出层的属性-->
 <button class="btn btn-primary delete" data-toggle="modal"
  data-target="#mymodal-data" data-whatever="@mdo">
  修改
</button>

<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">
   <span aria-hidden="true">×</span>
   <span class="sr-only">Close</span>
  </button>
  <h4 class="modal-title">弹出层标题</h4>
  </div>
  <div class="modal-body">
  <p>弹出层主体内容</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary">保存</button>
  </div>
 </div>
 </div>
</div>

结果:

bootstrap弹出层的多种触发方式

2.方法二:通过js绑定

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

<button class="btn btn-info" type="button" id="y-modalBtnAdd" > <label >添加</label></button>


<!-- 模态弹出窗内容 -->
<div class="modal" id="y-myModalAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">
   <span aria-hidden="true">×</span>
   <span class="sr-only">Close</span>
  </button>
  <h4 class="modal-title">弹出层标题</h4>
  </div>
  <div class="modal-body">
  <p>通过js绑定button和弹出层触发</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary">保存</button>
  </div>
 </div>
 </div>
</div>
<!--js代码-->
<script type="text/javascript">
 $(function(){
 // dom加载完毕
 var $m_btn = $('#y-modalBtnAdd'); //y-modalBtnAdd是button的id
 var $modal = $('#y-myModalAdd'); //y-myModalAdd是弹出的遮罩层的id,通过这两个id进行绑定
 $m_btn.on('click', function(){
  $modal.modal({backdrop: 'static'});
 });
 });
 </script>

结果:

bootstrap弹出层的多种触发方式

3.方法三:点击表格一行,弹出弹出层

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

<!--表格-->
<table class="table table-bordered " style="width: 400px">
 <thead>
 <tr>
  <th>一</th>
  <th>二</th>
  <th>三</th>
 </tr>
 </thead>
 <tbody class="tableBody">
 <tr>
  <td>one</td>
  <td>two</td>
  <td>three</td>
 </tr>
 <tr>
  <td>four</td>
  <td>five</td>
  <td>six</td>
 </tr>
 </tbody>
</table>

<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">
   <span aria-hidden="true">×</span>
   <span class="sr-only">Close</span>
  </button>
  <h4 class="modal-title">弹出层标题</h4>
  </div>
  <div class="modal-body">
  <p>点击表格一行内容,弹出弹出层</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-primary">保存</button>
  </div>
 </div>
 </div>
</div>


<!--js代码-->
<script type="text/javascript">
 $(function () {
 $(".tableBody>tr").each(function () {
  $(this).on("click",function () {
  $(this).attr({"data-toggle":"modal","data-target":"#mymodal-data","data-whatever":"@mdo"});

  })
 });
 });
</script>

结果:

bootstrap弹出层的多种触发方式

bootstrap弹出层的多种触发方式

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'});
 });
 });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 #Javascript
微信小程序 支付后台java实现实例
May 09 #Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 #Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 #Javascript
使用ES6语法重构React代码详解
May 09 #Javascript
JQuery实现定时刷新功能代码
May 09 #jQuery
React.js中常用的ES6写法总结(推荐)
May 09 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
php date()日期时间函数详解
2010/05/16 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
node后端服务保活的实现
2019/11/10 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
清洁工表扬信
2014/01/08 职场文书
家长会演讲稿
2014/04/26 职场文书
人代会标语
2014/06/30 职场文书
学校献爱心活动总结
2014/07/08 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
放牛班的春天观后感
2015/06/01 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技