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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JS实现简单拖拽效果
Jun 21 Javascript
jquery拖动改变div大小
Jul 04 jQuery
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
async/await地狱该如何避免详解
May 10 Javascript
微信小程序调用后台service教程详解
Nov 06 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实现的事件机制实例分析
2015/06/18 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
python实现12306火车票查询器
2017/04/20 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
料理师求职信
2014/01/30 职场文书
本科应届生自荐信
2014/06/29 职场文书
国企干部对照检查材料
2014/08/22 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python