bootstrap 弹出框modal添加垂直方向滚轴效果


Posted in Javascript onJuly 09, 2018

效果图预览

bootstrap 弹出框modal添加垂直方向滚轴效果

1. 添加css样式

.modal-dialog{position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
 .modal-content{/*overflow-y: scroll; */ position: absolute; top: 0; bottom: 0; width: 100%;}
 .modal-body{overflow-y: scroll; position: absolute; top: 55px; bottom: 65px; width: 100%;}
 .modal-header .close{margin-right: 15px;}
 .modal-footer{position: absolute; width: 100%; bottom: 0;}

2.html 代码

   注:style="width:800px;" 这宽度我是根据自己需要添加的 可根据自己要求适当变化 默认不需要添加

<div class="modal fade bs-example-modal-sm1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="table-responsive">
  <div class="modal-dialog modal-sm1" style="width:800px;">
   <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">
      ×
     </span>
    </button>
    <h4 class="modal-title" id="myModalLabel2">
     <!-- 交互信息详情 -->
     <label data-locale="i18n_interactiveInformationDetails" style="cursor: pointer;"></label>
    </h4>
   </div>
   <div class="modal-body">
      <table class="table table-striped table-bordered">
       <thead>
       <tr class="headings">
        <th class="column-title">
         日期
         </th>
        <th class="column-title">
          主题 
         </th>
        <th class="column-title">
         内容
        </th>
        <th class="column-title">
         负责人
         </th>
       </tr>
      </thead>
      <tbody>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
      <tr>
       <td>2018.07.09</td>
       <td>弹出框垂直方向添加滚动条</td>
       <td>给modal弹出框中添加垂直方向的滚动条</td>
       <td>秋风伴落叶</td>
      </tr>
     </tbody>
     </table>
    </div>
   </div>
  </div>
 </div>
</div>

总结

以上所述是小编给大家介绍的bootstrap 弹出框modal添加垂直方向滚轴效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
Javascript函数的参数
Jul 16 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
JS实现图片旋转动画效果封装与使用示例
Jul 09 #Javascript
JavaScript的Object.defineProperty详解
Jul 09 #Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 #Javascript
mac上配置Android环境变量的方法
Jul 08 #Javascript
vue.js使用watch监听路由变化的方法
Jul 08 #Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python实现列表的排序方法分享
2019/07/01 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
十八大感想感言
2014/02/10 职场文书
二手房购房意向书范本
2014/04/01 职场文书
促销活动总结范文
2014/04/30 职场文书
村党支部公开承诺书
2014/05/29 职场文书
维修工先进事迹
2014/05/29 职场文书
女方离婚起诉书
2015/05/18 职场文书
小学运动会开幕词
2016/03/04 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL