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 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
JavaScript实现打字游戏
2021/02/19 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python实现批量监控网站
2016/09/09 Python
详解Python文本操作相关模块
2017/06/22 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Python实现壁纸下载与轮换
2020/10/19 Python
python图片合成的示例
2020/11/09 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
大家检讨书5000字
2014/02/03 职场文书
股权收购意向书
2014/04/01 职场文书
员工考核评语大全
2014/04/26 职场文书
法制宣传月活动方案
2014/05/11 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
教师工作总结范文2014
2014/11/10 职场文书
社区国庆节活动总结
2015/03/23 职场文书