Bootstrap Modal 加滚动条

最新推荐文章于 2021-09-05 01:15:32 发布
最新推荐文章于 2021-09-05 01:15:32 发布
阅读量1.4w 收藏 1
点赞数 4
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TLD_DLT/article/details/48154817
版权

问题：写模态对话框时，使用Bootstrap 自带的modal样式，滚动条是在遮罩层中，而且模态框的高度是自动的，造成了滚动一直无穷无尽的感觉，界面不是很友好。

方法：在modal-body中设置高度并加上滚动条

解决：<div class="modal-body"  style="height:500px; overflow:auto;">






MjayTang
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Bootstrap Modal 垂直方向加滚动条
Jason
10-28 3万+
背景使用Bootstrap Modal实现用户资料修改，由于用户信息过多，默认Modal出现页面滚动条，为了用户体验，不使用页面滚动条，在Modal body部分加垂直滚动条，Modal header和footer固定位置。效果 代码加入CSS样式.modal-dialog { position: absolute; top: 0; bottom: 0; l
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
给bootstrap-treeview添加滚动条
编程技术分享，Java后端、Vue前端
12-15 2537
 bootstrap-treeview默认是不加滚动条的，如果你内容多，出现的滚动条是浏览器自动的滚动条（就是全屏的）。 增加滚动条很简单，外面包一层这个div即可。 &lt;div style=" overflow:scroll; width:20%; height:680px;float:left"&gt; &lt;div id="tree"&gt;&lt;/div&gt; &lt;/d...
Bootstrap为模态框添加滚动条
qq_33934427的博客
09-05 1615
Bootstrap为模态框添加滚动条 转载至bootstrap模态框加滚动条的方法 <style type="text/css"> .modal-dialog { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .modal-content { /*overflow-y: scroll; */
给bootstrap的模态框加上垂直滚动条
CLX_Dream的博客
05-06 2923
在html文件的<style></style>标签中加上如下代码： .modal-dialog { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } ...
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
08-31
通过这种方法，我们可以有效地解决Bootstrap Modal的多弹窗叠加引起的滚动条遮罩阴影问题，同时保持Modal功能的正常运行，提供良好的用户体验。如果在实际应用中遇到其他问题，可以进一步研究Bootstrap的文档或者...
bootstrap多层模态框滚动条消失的问题
01-19
bootstrap 打开多层模态框的情况下，关闭任意一个模态框，都会导致其余模态框的滚动条消失。 监测html发现，当打开模态框时，会给 body 元素加一个 modal-open 的 class，而在 bootstrap.css 中，有这样一条 css ...
Bootstrap Modal遮罩弹出层(完整版)
09-01
- 内容区域的定位和滚动：使用`overflow-y: auto`来模拟浏览器的垂直滚动条，同时利用`-webkit-transform`来控制模态窗口从顶部滑入和滑出的效果。 3. **JavaScript 控制**： Bootstrap Modal 的打开和关闭通常...
React Model 中添加滚动条
weixin_44233592的博客
08-13 1333
使div出现滚动条： 在div的样式上添加 height: 660px; //百分比不行 overflow:auto
bootstrap模态框的使用 及 解决多个模态框嵌套出现滚动条错乱问题
haogemr的博客
03-15 1742
模态框的使用模板 新建aaa.html &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog"
修改 bootstrap 多个模态对话框 焦点冲突问题 BUG
09-12
修改 bootstrap 多个模态对话框 焦点冲突问题
Bootstrap组件——进度条、滚动监控
xun__xing的博客
08-01 1514
进度条、滚动监控一、进度条1.基础2.高度3.背景4.多进度条进度（嵌套）5.条纹进度指示6.动画条纹进度条二、滚动监听1.在navbar导航中2.嵌套的导航3.列表组4.事件 一、进度条 1.基础 使用 .progress 容器来指定进度条的最大值。 使用 .progress-bar 来表示当前的进度。 .progress-bar 要求的内嵌样式，使用全局实用CSS或自定义CSS来设置其宽度。 <div class="progress"> <!-- .progress-ba
多个Bootstrap Modals（模态框）滚动条问题处理
chuosuikuai8063的博客
05-07 866
1、模态框（Modal）div位置由上到下，决定第1层，第2层，第3层； 2、然后出现多个Modals（模态框）出现不同的滚动条，影响界面效果； 处理：（1）当前模态框弹出时要控制前一个页面的滚动条隐藏； （2）关闭当前模态框时要控制前一个页面的滚动条展开； ...
Bootstrap 滚动条
热门推荐
zsg88的专栏
04-15 4万+
一：增加滚动条 其实只要在 相关模块的  class属性中，再加上  pre-scrollable 即可。 例如是在中添加pre-scrollable： 二：设置overflow (1)div style=" overflow:scroll; width:400px; height:400px;”> 记住宽和高一定要设置噢，否则不成的，不过在不超出时，
调整bootstrap modal窗口大小 以及可拖拽
chengtouyan3481的博客
04-27 2493
调整modal窗口大小以及垂直滚动条 .modal .modal-body { max-height: 600px; overflow-y: auto; } 调整modal窗口宽度 <div class="modal-dialog" styl...
浅谈弹窗Modal实现和有滚动条偏移解决方法
yihuliunian的博客
06-29 2075
转载自品略图书馆http://www.pinlue.com/article/2020/03/2010/4610037571703.html 弹窗也叫modal（模态）在网页设计中是一个常见的功能。实现方法也不会太复杂，可以通过css实现居中（bootstrap的modal是使用靠上边距来实现），然后JS控制点击显示和消失。在弹窗中也许你会发现一个问题，就是当页面有滚动条时，点击弹窗可能需要隐藏滚动条，这时内容会变宽，本文来自于江水提供了三种解决方法，收益匪浅，感谢。 弹窗的实现原理和方法 弹...
bootstrap 增加滚动条
daiqinge的博客
10-27 3万+
其实只要在 相关模块的  class属性中，再加上  pre-scrollable 即可。 比如我的例子是在中添加pre-scrollable：
bootstrap列表添加滚动条
花海的专栏
05-20 3万+
有时候列表中数据过多，导致超出页面，影响视觉感受。这时我们需要添加一个滚动条。 初始状态如图： 代码如下： 免费域名注册 免费 Window 空间托管 图像的数量 24*7 支持 每年更新成本 免费域名注册 免费 Window 空间托管
bootstrap 3 模态框　滚动条
最新发布
06-03
在 Bootstrap 3 模态框中添加滚动条可以使用以下步骤： 1. 在 CSS 样式中给 `.modal-body` 添加 `max-height` 属性和 `overflow-y` 属性，例如： ```css .modal-body { max-height: 400px; overflow-y: auto; } ``` 2. 将 `max-height` 的值设置成模态框的高度减去标题栏和底部按钮栏的高度，这样可以保证模态框内容超出限定高度时会出现滚动条。 以下是一个示例代码： ```html <div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body" style="max-height: 400px; overflow-y: auto;"> <!-- Modal Body Content --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> ``` 通过以上方法，你可以在 Bootstrap 3 模态框中添加滚动条，并且可以控制滚动条的最大高度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值