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.alert 弹出式复选框实现代码
Jun 15 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
jQuery构造函数init参数分析
May 13 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
详细聊聊浏览器是如何看闭包的
Nov 11 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/05/22 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
简单的js分页脚本
2009/05/21 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
BootStrap selectpicker
2016/06/20 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
浅谈Python 对象内存占用
2016/07/15 Python
python 读写中文json的实例详解
2017/10/29 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python的中异常处理机制
2018/08/30 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
python 常见的排序算法实现汇总
2020/08/21 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
十佳护士获奖感言
2014/02/18 职场文书
公司营业员的自我评价
2014/03/04 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
婚育证明样本
2015/06/16 职场文书
2019教师的学习计划
2019/06/25 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Python编程编写完善的命令行工具
2021/09/15 Python