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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 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
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
关于PHP开发的9条建议
2015/07/27 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python 实现波浪滤镜特效
2020/12/02 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
双方协议书
2014/04/22 职场文书
单位绩效考核方案
2014/05/11 职场文书
财务会计求职信范文
2015/03/20 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript