模态框弹出，出现滚动条，只有滑动才能看见完整模态框

最新推荐文章于 2024-08-21 09:17:03 发布
最新推荐文章于 2024-08-21 09:17:03 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： bootstrap 文章标签： bootstarp模态框滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcc_2269861428/article/details/100020540
版权

模态框弹出，出现滚动条，只有滑动才能看见完整模态框

如图：

只有滑动右侧的滚动条才能看见全部

而事实是我中间那块完全可以全部显示出模态框来，多出个滚动条很不方便。

F12一看

发现上下左右的边距都很大。

距离上边距160px;

问题可以解决了，将上边距减小，并让滚动条隐藏（这是bootstrap的css样式，我在基础上修改）

完美解决，查看样式

前方太黑暗
关注
专栏目录
html5自动出现滚动条,关于HTML中的滚动条/去掉滚动条问题本
weixin_30537231的博客
05-30 2798
html怎么去掉网页的滚动条body里面加 body{ overflow:scroll; overflow-x:hidden; } 这个是y轴有滚动条，x轴没有。如果是都要滚动条就去掉overflow-x:hidden;，如果是反正哪个轴要滚动条就加上overflow-x/y:scroll;整个页面滚动条就加在body里面。html 怎么去掉下边的滚动条你的盒子宽度要够一定的宽度，就会自动消失盒...
bootstrap两层模态框无法滚动问题
记录
12-06 2803
bootstrap-modal
滚动时显示滚动条，不滚动不显示
qq_57260058的博客
06-07 876
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .content{ width: 200px; height: 150px; padding-left: 10px; border: 1px solid #ccc; overflow-...
bootstrap的模态弹出框modal在有滚动条的页面被隐藏了的解决方法
qq_30908729的博客
10-25 2987
bootstrap的模态弹出框modal在有滚动条的页面被隐藏了的解决方法： 思路就是在模态框弹出之前改变它弹出的位置，具体步骤如下： 下面代码的myModal是弹出框的id，show.bs.modal是bootstrap的东西，整个语句就是给模态框一个绑定事件，在弹出前执行function里面的方法。 注意：$(window)这个对象指的是带有滚动条的页面，如果上一级的页面滚动
Bootstrap 模态框（Modal）插件
最新发布
lwx666sl的博客
08-21 918
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
（适用于大部分浏览器）js+css 实现 滚动条滑动时显示，不滑动时隐藏
ck07
04-09 6499
思路 把原有的滚动条隐藏，创建个新的滚动条，并拓展其宽度，达到隐藏的效果,而判断滚动条是否滚动，保存原有的滚动条到顶部的距离，看是否发生改变，做出相应的判断。 html &lt;body&gt; &lt;div id='wrapper'&gt; ... ... &lt;/div&gt; &lt;/body&gt; css b...
自定义显隐滚动条：滚动时显示，不滚动自动隐藏，自定义隐藏时间
梦逸灵箭——的博客
02-28 2144
滚动时出现滚动条，停留三秒后，自动消失
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
09-01
7. **模态框(Modals)**：模态框是浮动在当前页面上的弹出窗口，用于展示额外信息或交互，而不会离开当前页面。 示例代码： ```html <!-- Button trigger modal --> Launch demo modal <!-- Modal --> ...
vue 监听某个div垂直滚动条下拉到底部的方法
10-18
在实际应用中，可能会遇到第三方UI组件（如Element UI）弹出的模态窗口影响滚动监听的情况。模态窗口打开时可能会导致滚动条位置变化，或者在模态窗口关闭后需要重置滚动位置。因此，需要特别注意在模态窗口的生命...
功能强大的Bootstrap组件（结合js）
10-21
创建模态框的基本结构包括一个触发模态框显示的按钮和模态框本身。按钮通常设置`data-toggle="modal"`和`data-target="#myModal"`属性，用于触发对应ID的模态框。模态框由`.modal`类定义，内部包含`.modal-dialog`和...
微信小程序实现弹窗禁止底部滚动详细教程
"这篇文章主要讲解了如何在微信小程序中实现自定义弹出模态框，并在弹出时禁止页面底部的滚动功能。作者通过提供具体的WXML和WXSS代码实例，帮助开发者理解并应用到实际项目中。" 在微信小程序开发中，有时我们需要...
html如何实现模态框状态下页面可以滚动,h5滑动模态框适用移动端
weixin_42470359的博客
06-02 534
插件描述：集合了几个常用的h5端模态框功能，比如从下向上滑出，从右向左滑出，弹出框，提示浮层等。并且蒙版区域不能滑动。更新时间：2019-04-0420:55:57更新说明：改进提示浮层的功能使其可以一直显示，添加手动关闭提示浮层的方法更新时间：2019-02-1621:40:12更新说明：1.添加了 shadeClose 选项，为false 的时候表示点击黑色蒙版不会关闭模态框，此时关闭需要...
移动端监听页面关闭事件_【第六课】更复杂的移动端页面
weixin_39554775的博客
11-28 702
前言从零开始学前端系列课程，与传统的视频大课堂教学不同，没有填鸭；也普通做练习题的方式不同，没有假想的模拟题。 本课程拆出80个左右必须掌握的技能点，并对其分组，从易到难地列出学习曲线。同时从真实项目中拆解出与技能一一对应的不同难度的任务，通过解决任务来巩固夯实知识。 这就是IT修真院集自适应学习、师兄辅导、在线一站式学习的DWS学习法（Learning by Doing ，Learing by ...
点击弹出模态框之后溢出有滚动条解决办法
weixin_60477441的博客
08-30 386
css 中添加 html,body{ width:100%;
Bootstrap中模态框多层嵌套时滚动条问题
qq_39726798的博客
01-07 586
现象： 两层模态框，在上层模态框隐藏后，底层模态框无法滚动 原因： 模态框在打开的时候，会隐藏掉父标签的滚动条，关闭的时候会恢复回去，把滚动条加到父标签，所以，有两层模态框的时候，上层关闭时，一般会把滚动条加回body，导致底层模态框无法滚动 解决办法： 在顶层模态框隐藏时，继续隐藏body的滚动条
解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
热门推荐
yingzizizizizizzz的专栏
05-31 1万+
在做项目时，用到了弹出框，下边要有一层遮罩。写了一个简单的遮罩，拉动滚动条后发现，遮罩层只是遮住了视口，下面看不到根本没遮住，后来经过度娘后才有了解决方法。 有问题的遮罩层代码 .modal .modal-shadow { opacity: 0.3; filter: alpha(opacity=30); background-color: gray; position: absolut
标准ie8下，出现滚动条，但是没有滚动块的解决方法
业精于勤荒于嬉;行成于思，毁于随。
12-06 1760
http://blog.csdn.net/qadada/article/details/19938755 加上overflow-y：auto属性试下
已解决：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示
felicity_zll的博客
05-16 5778
记录一下在项目中遇到的问题，困扰了几天最终解决了。 一、问题：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示。 1、首次进入的效果 可以看到滚动条并没有渲染出来，但是刷新页面或者改变窗口大小。又会出现。 最后一点点查看DOM元素、发现了问题： 这是无滚动条首行最后一个单元格：； 这是又有滚动条首行最后一个单元格：； 然后再改下这个属性： 二、解决 直接在css中添加： //显示滚动条 /deep/ .el-table--scrolla
css鼠标移动上去才显示滚动条
qq_33051709的博客
07-05 8413
当鼠标移动上去才显示滚动条，用css就可以完成 .list { /*默认显示滚动条，设置为白色看不出来*/ overflow: scroll; height: 500px; } .list::-webkit-scrollbar { width: 10px; background-color: #fff; } .list:hover ::-webkit-scrollbar-track-piece { /*鼠标移动上去再显示滚动条*/ background
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值