bootstrap添加模态窗后,再弹出消息提示框后,原先的滚动条被吃掉了

fjzhouxy 2015-08-30 11:29:51
如题 ,在模态中添加了比较多的内容,打开模态框后,会自动添加滚动条,但是在模态框操作提交 验证的时候,验证未通过需要提示提示信息,在提示信息窗口关闭后,页面的滚动条消失了,导致模态框的内容被吃掉一部分。如图:

这是滚动条未消失之前:滚动条还在


弹出的这个提示框:滚动条也还在,


但是关闭提示框后,滚动条就消失了,导致模态框中的内容被吃掉一部分
...全文
7170 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
晓风残日 2018-04-09
  • 打赏
  • 举报
回复
有用,赞14楼
nanyan_xixi 2017-11-01
  • 打赏
  • 举报
回复
14楼亲测有效,谢谢14楼的亲
erichiechu 2017-05-06
  • 打赏
  • 举报
回复
多个模态框框,当关闭某一个的时候, body 上面的Class modal-open 被移除了
erichiechu 2017-05-06
  • 打赏
  • 举报
回复
楼主,我有踩到这个地雷, 解法: $dlg.on('hidden.bs.modal', function (e) { if ($(".modal.fade.in").length > 0) $("body:not(.modal-open)").addClass("modal-open"); });
黄一震 2017-03-20
  • 打赏
  • 举报
回复
找到问题所在 修改modal-open这个class的overflow .modal-open { overflow: scroll !important; }
社会复仇者 2016-12-13
  • 打赏
  • 举报
回复
我不知道跟楼主是不是一个问题。不过我碰到了是modal上再弹出modal,关闭第二个moal后滚动条消失,解决方案打开CSS稳健,搜索modal把modal-open 和modal-close的overflow属性都改为auto,就可以了。
jane7777777 2016-09-27
  • 打赏
  • 举报
回复
这个问题最终解决了吗 ?求支招
dsafwef151fwae1 2016-06-22
  • 打赏
  • 举报
回复
感谢8楼,亲测有效
一天zijie一夜 2016-05-25
  • 打赏
  • 举报
回复
8楼答案正解
yuncopy 2016-02-19
  • 打赏
  • 举报
回复
那不是吃掉:设置就好了,overflow :scroll, 思考问题的思路
fjzhouxy 2015-09-15
  • 打赏
  • 举报
回复
easyui 的弹窗比Bootstrap还高, 后来没用了,换成页面的提示错误信息,没用弹窗
JPF1024 2015-09-01
  • 打赏
  • 举报
回复
你用一个easy ui 的弹窗试试,bootstrap确实没有close事件
JPF1024 2015-08-31
  • 打赏
  • 举报
回复
你的模态框里面,可以先考虑把“回复”那一块的内容隐藏掉,点击一个按钮或者标题在展开。 另外我记得官方说的好像模态框不支持叠加吧? http://v3.bootcss.com/javascript/#modals " 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。"
fjzhouxy 2015-08-31
  • 打赏
  • 举报
回复
引用 4 楼 dcxy0 的回复:
[quote=引用 3 楼 fjzhouxy 的回复:] [quote=引用 2 楼 dcxy0 的回复:] 你的模态框里面,可以先考虑把“回复”那一块的内容隐藏掉,点击一个按钮或者标题在展开。 另外我记得官方说的好像模态框不支持叠加吧? http://v3.bootcss.com/javascript/#modals " 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。"
不是多个模态框 ,是模态框后,有个数据校验,弹出的comfirm提示框,这个也被当做模态了吗?[/quote] 那估计没有,你在confirm关闭的时候,在用js给下面那个模态框设置一个高度试试。、[/quote] 找了一下,没有不能定义confirm的close事件,在源码中有close事件,但是获取出来的模态框的高度没问题,重设模态框高度没有效果
JPF1024 2015-08-31
  • 打赏
  • 举报
回复
引用 3 楼 fjzhouxy 的回复:
[quote=引用 2 楼 dcxy0 的回复:] 你的模态框里面,可以先考虑把“回复”那一块的内容隐藏掉,点击一个按钮或者标题在展开。 另外我记得官方说的好像模态框不支持叠加吧? http://v3.bootcss.com/javascript/#modals " 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。"
不是多个模态框 ,是模态框后,有个数据校验,弹出的comfirm提示框,这个也被当做模态了吗?[/quote] 那估计没有,你在confirm关闭的时候,在用js给下面那个模态框设置一个高度试试。、
fjzhouxy 2015-08-31
  • 打赏
  • 举报
回复
引用 2 楼 dcxy0 的回复:
你的模态框里面,可以先考虑把“回复”那一块的内容隐藏掉,点击一个按钮或者标题在展开。 另外我记得官方说的好像模态框不支持叠加吧? http://v3.bootcss.com/javascript/#modals " 不支持同时打开多个模态框 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。"
不是多个模态框 ,是模态框后,有个数据校验,弹出的comfirm提示框,这个也被当做模态了吗?
fjzhouxy 2015-08-30
  • 打赏
  • 举报
回复
各位大神,请现身相救吧。不用消息提示框不行,因为有一个confirm的需要,除非用windows自带的,但是样式又不统一了,难看,
Bootstrap官网上原文复制粘贴,将其整理的 Bootstrap入门教学文档。 Bootstrap 简介 8 什么是 Bootstrap? 8 历史 9 为什么使用 Bootstrap? 9 Bootstrap 包的内容 9 Bootstrap 环境安装 11 下载 Bootstrap 11 文件结构 12 HTML 模板 12 实例 13 Bootstrap CSS 概览 15 HTML 5 文档类型(Doctype) 15 移动设备优先 15 响应式图像 16 全局显示、排版和链接 16 避免跨浏览器的不一致 18 容器(Container) 18 Bootstrap 网格系统 20 什么是网格(Grid)? 20 什么是 Bootstrap 网格系统(Grid System)? 20 Bootstrap 网格系统(Grid System)的工作原理 21 媒体查询 21 网格选项 22 响应式的列重置 23 偏移列 25 嵌套列 26 列排序 28 Bootstrap 排版 31 标题 31 引导主体副本 33 强调 34 缩写 35 地址(Address) 36 引用(Blockquote) 37 列表 38 Bootstrap 代码 41 实例 41 Bootstrap 表格 43 基本的表格 43 可选的表格类 44 上下文类 50 响应式表格 52 Bootstrap 表单 54 表单布局 54 支持的表单控件 58 静态控件 63 表单控件状态 64 表单控件大小 67 表单帮助文本 69 Bootstrap 按钮 71 按钮大小 72 按钮状态 74 按钮标签 77 Bootstrap 图像 79 Bootstrap 帮助器类 80 关闭图标 80 插入符 80 快速浮动 81 居中内容块 82 清除浮动 82 显示和隐藏内容 83 屏幕阅读器 84 Bootstrap 响应式实用工具 86 打印类 86 实例 86 Bootstrap 字形图标(Glyphicons) 89 什么是字形图标(Glyphicons)? 89 获取字形图标(Glyphicons) 89 CSS 规则解释 89 用法 91 带有导航栏的字形图标(Glyphicons) 92 定制字形图标(Glyphicons) 93 Bootstrap 下拉菜单(Dropdowns) 95 选项 96 Bootstrap 按钮组 100 基本的按钮组 101 按钮工具栏 101 按钮的大小 102 嵌套 103 垂直的按钮组 104 Bootstrap 按钮下拉菜单 106 分割的按钮下拉菜单 107 按钮下拉菜单的大小 108 按钮上拉菜单 110 Bootstrap 输入框组 112 基本的输入框组 112 输入框组的大小 113 复选框和单选插件 115 按钮插件 116 带有下拉菜单的按钮 117 分割的下拉菜单按钮 119 Bootstrap 导航元素 121 表格导航或标签 121 胶囊式的导航菜单 122 两端对齐的导航 124 禁用链接 125 下拉菜单 126 Bootstrap 导航栏 130 默认的导航栏 130 响应式的导航栏 131 导航栏中的表单 133 导航栏中的按钮 134 导航栏中的文本 135 非导航链接 136 组件对齐方式 137 固定到顶部 139 固定到底部 140 静态的顶部 141 倒置的导航栏 143 路径导航 145 Bootstrap 分页 146 分页(Pagination) 146 翻页(Pager) 149 Bootstrap 标签 153 Bootstrap 徽章(Badges) 155 激活导航状态 155 Bootstrap 超大屏幕(Jumbotron) 158 Bootstrap 页面标题(Page Header) 161 Bootstrap 缩略图 162 添加自定义的内容 163 Bootstrap 警告(Alerts) 167 可取消的警告(Dismissal Alerts) 168 警告(Alerts)中的链接 170 Bootstrap 进度条 172 默认的进度条 172 交替的进度条 173 条纹的进度条 174 动画的进度条 175 堆叠的进度条 176 Bootstrap 多媒体对象(Media Object) 178 Bootstrap 列表组 184 向列表组添加徽章 185 向列表组添加链接 186 向列表组添加自定义内容 187 Bootstrap 面板(Panels) 190 面板标题 190 面板脚注 192 带语境色彩的面板 192 带表格的面板 194 带列表组的面板 196 Bootstrap Wells 198 尺寸大小 198 B
JS学习笔记相关文档 Login.html学习 placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。 该提示会在用户输入值之前显示在输入字段中。 注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email和password。 测试样例参见test/placeholder.html 局部刷新 class="toolbar clearfix" ToolBar  隐藏掉系统原先的导航栏 clearfix 主要是用在浮动层的父层,而 clear 主要是用在浮动层与浮动层之间,和浮动层同一级,如果想要撑开父层的高度,clear 就要放在最后。 Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果需要引用该插件功能,需要引入modal.js OR bootstrap.js OR bootstrap.min.js 用法:通过 data 属性在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有 id="identifier")。 测试样例参见test/Modal.html function($) javascript中(function($){...})(jQuery)写法是指的是是匿名函数。 function(arg){...}这也定义了一个匿名函数,参数为arg。 测试样例参见test/AnonymousFunction.html .navbar-fixed-top使导航条固定在顶部 Index.html学习 Font Awesome 图标 Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 如果需要该插件功能,需要引入font-awesome.css OR font-awesome.min.css <html> <head> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> </head> <body>
  • List icons
  • List icons
  • List icons
  • 2、动态图标 3、旋转和翻转的图标 4、图标抖动√ <!-- 测试图标抖动--> 测试

    经测试:图标抖动与bootstrap.min.css;font-awesome.min.css;ace.min.css相关联

    测试样例参见test/tubiao2.html PS:fa-angle-double-down双箭头向下指示的图标,展开操作时用。 任务折叠+进度控制 主要是li标签的循环嵌套,浮于上层的列表需要引入jquery-2.1.4.min.js,bootstrap.min.js以使用dropdown等属性实现展开与折叠特性 进度控制, 除了使用
    直接控制进度条的长度外,还可以使用如下功能: 以实现进度条的变更控制,从后台获取数据,并计算其百分比并显示在前端。 分别使用progress-bar,progress-bar-warning,progress-bar-danger,progress-bar-success表示其安全与否等级。 测试样例分别参见test/liTag.html, test/progress.html 评论与回复 评论区的滚动:设置定量高度,在文字被排满的情下,自动加入滚动条
    <input type="text" id="test"/><input type='button' value='提交' [removed] function fun(){ var str = document.getElementById("test").value; var divs = document.getElementsByTagName("div"); for(i=0;i"; } }} [removed] 可实现评论提交功能。 也可通过与后台交互的方式,如发送post请求,提交给后台,后台审核通过后,通过servlet机制再传送给前端。 测试样例分别参见test/comment.html, test/comment2.html

    61,112

    社区成员

    发帖
    与我相关
    我的任务
    社区描述
    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
    社区管理员
    • HTML(CSS)社区
    加入社区
    • 近7日
    • 近30日
    • 至今
    社区公告
    暂无公告

    试试用AI创作助手写篇文章吧