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 25 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jquery插件validate验证的小例子
May 08 Javascript
js给table赋值的实例代码
Oct 13 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
javascript中this关键字详解
Dec 12 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
Vue2 轮播图slide组件实例代码
May 31 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
微信小程序之购物车功能
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
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
smarty中post用法实例
2014/11/28 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python基于DES算法加密解密实例
2015/06/03 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
邮政员工辞职信
2014/01/16 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python