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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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
CentOS安装php v8js教程
2015/02/26 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python中dir函数用法分析
2015/04/17 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python何时应该使用Lambda函数
2019/07/02 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python autoescape标签用法解析
2020/01/17 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python绘图模块之利用turtle画图
2021/02/12 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
什么是属性访问器
2015/10/26 面试题
班会关于环保演讲稿
2013/12/29 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
激励口号大全
2014/06/17 职场文书