BootStrap的两种模态框方式


Posted in Javascript onMay 10, 2017

bootstrap的弹出层

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>

以上所述是小编给大家介绍的BootStrap的两种模态框方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
Vue实现多页签组件
Jan 14 Vue.js
微信小程序之购物车功能
Sep 23 #Javascript
js canvas实现QQ拨打电话特效
May 10 #Javascript
bootstrap弹出层的多种触发方式
May 10 #Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 #Javascript
微信小程序 支付后台java实现实例
May 09 #Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 #Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 #Javascript
You might like
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue组件name的作用小结
2018/05/23 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python打印输出数组中全部元素
2018/03/13 Python
python随机取list中的元素方法
2018/04/08 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python斐波那契数列的计算方法
2018/09/27 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
心理健康活动总结
2014/04/30 职场文书
物理课外活动总结
2014/08/27 职场文书
争先创优演讲稿
2014/09/15 职场文书
就业意向协议书
2015/01/29 职场文书
2015年司法局工作总结
2015/05/22 职场文书
小学作文之描写天气
2019/08/15 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS