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 使用attr方法实现下拉列表选中
Oct 13 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
JavaScript的一些小技巧分享
Jan 06 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
详解使用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 urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python 字符串操作方法大全
2014/03/11 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python requests模块实例用法
2019/02/11 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
捐款倡议书范文
2014/02/02 职场文书
家长对孩子的感言
2014/03/10 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
名人传读书笔记
2015/06/26 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书