关于bootstrap模态框 modal.js 单击模态框按钮效果出来之后为什么要阻止滚动条？_问答_ThinkSAAS
关于bootstrap模态框 modal.js 单击模态框按钮效果出来之后为什么要阻止滚动条？
关于bootstrap模态框 modal.js 单击模态框按钮效果出来之后为什么要阻止滚动条？
单位要求 单击模态框的时候滚动条不能消失。因为滚动条消失的时候，内容页面会变宽。
看到我画的红圈了没，内容的滚动条没有了！
弹出模态框效果的时候。 我希望模态框效果情况下 滚动条必须存在。
请问是怎么做？
第二个是腾讯的。人家弹出模态框效果的时候，滚动条还在！
我真郁闷 不知道怎么下手？
我希望能跟腾讯一样
我自己解决答案是
我是给这个模态框的样式 设置成overflow:inherit 。然后在bootstrap.js文件里找到padding-left 去掉就好了
这个最初是IE里面的，后来firefoxchrome好像也支持了。
不建议使用，这个不是标准里面的，将来不一定支持。
而且代码容易写混乱了，multiNavItem1属于全局作用域，而且你可以给他赋值，赋值之后就是那个新的值，不赋值就是那个元素的值，当有些id赋了值有些没有，那么有些就是这个DOM对象，有些不是，特别容易混乱了。
document.getElementById可以直接使用元素的ID，但在html5的DOM操作中，推荐使用querySlector和querySlectorAll
看标题有点不明所以
就问题来看
是,推荐使用getElementById(),所有浏览器都支持
html5想要搞一个类似jQuery的选择器目前各主流浏览器对此API提供了良好支持，IE需8+。详情见caniuse。
element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');
使用这两个方法无法查找带伪类状态的元素,而且节点更新后element变量不会改变，而
element = document.getElementById('selectors');
可以直接这样写的id.style.display="inline"；使用id相当于直接成为了window对象的属性，使用window.id可以获取，但是不推荐这种写法，还是用getElementById或者querySelector好
你指的是querySelectorAll吧，这个是html5引入的新API，某些浏览器是不支持的
楼主说的确可以直接使用元素ID直接使用,但是这个方法不是W3C标准的,在低版本的火狐根本就不支持这样的写法.
getElementById getElementByTagName等方法都是DOM Core的组成部分，并不专属于js，支持DOM的任何一种程序设计语言都支持他们，比如XML编写出来的文档。
还有HTML-DOM,比如onclick属性,他们在DOM Core出现很久之前就为人们所熟悉了。你举的这个例子就是属于HTML-DOM，比如，我们可以把下面的语句：document.getElementById('form')简化为document.form，类似的element.getAttribute('src')简化为element.src.
HTML-DOM通常更短，但是只能用来处理web文档。
我感觉等native web component成熟了，就会支持并推荐使用lz说的这种写法了。
每个component的作用域相对独立，不会出现1楼说的id重复而产生的问题。
还是用js原生的方法吧，这说不好哪天不支持了不毁了?
严格讲下面的这个不是modalbox，只是个popover.正经的modal box ui交互定义就是要拦截其它所有交互
模态框弹出事件中，会给body添加一个class:
.modal-open {
自己把它重定义一下就行overflow: auto !，或者模态框弹出的时候写js
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
但是模态框自己也会有一个滚动条（看模态框的内容高度），得禁用了，设置一个最大高度，然后给模态框的内容加一个滚动条
也许你可以试试这个.
这个是基于bootstrap的一个模态框插件。比原生的更强大。主要是原生就像1L说的一样算是一个popover的效果。使用这个插件可以不依赖与dom。
自己写个插件就可以了
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境bootstrap3 模态弹出框无效_bootstrap吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：12,913贴子：
bootstrap3 模态弹出框无效收藏
如下方式引入bootstrap以下是官网的示例代码结果是不显示弹窗，只有遮罩层，另外 组合按钮里面的互斥选中效果，按钮loading效果也不可以，哪里出错了？望大神指点
bootstrap培训一般需要4-8周时间就能掌握,课程学费根据学习的课程内容设置.南昌bootstrap培训,口碑见证,国内创新&先就业后付款&,98%就业.
我今天也遇到这问题，楼主解决了也拜托告诉我下
没加js？&script type=&text/javascript&&
$(function() {
$(&#loginbtn&).click(function() {
$(&#loginModal&).modal('show');
$(function() {
$(&#icon-close&).click(function() {
$(&#loginModal&).modal('hide');
你又内容吗？
今天在用bootsrap要重构一个自己的模态框的时候也遇到了和lz的问题，刚开始我也以为是自己的写法出错了。花了很长的时间后来发现是因为jquery版本的问题，我用的3.0.0不行，后来用2.0.0就jquery就可以了。不知道lz是否是这个问题。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或关于[bootstrap modal 模态框弹出瞬间消失的问题]
来源：本站原创&
原问题链接 /question/747
提供一个小例子说明。
&button class="btn btn-primary btn-lg"
type="button"
data-toggle="modal"data-target="#myModal"&
Launch demo modal
注意红字部分type="button"，在需要触发的按钮处，加入这一段就好了。
原问题链接 /question/747 提供一个小例子说明. &button class=&btn btn-primary btn-lg& type=&button& data-toggle=&modal&data-target=&#myModal&& Launch demo modal &/button& 注意红字部分type=&q
点击文本框弹出热门标签的效果实现方法有很多,在本文为大家详细介绍下使用jQuery是如何实现的,感兴趣的朋友不要错过 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtm
想必大家对删除提示框并不陌生吧,也就是大家常见的弹出是否删除的对话框,下面使用jquery来实现下,感兴趣的朋友不要错过 /** * 删除草稿 */ function deleteDraft(the,id){ $.messager.confirm('删除草稿提醒', '&/br&确定删除这篇草稿吗?&/br&&/br&',function(r){ if(r){ $.ajax({ type : &post&, url : &http://lo
答案来自老外/questions//twitter-bootstrap-modal-blocks-text-input-field $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); 这个是国内同学的解决方法: /question/869 //显示modal $(
这篇文章主要介绍了C#实现客户端弹出消息框封装类,实例分析了C#弹出窗口的实现技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了C#实现客户端弹出消息框封装类.分享给大家供大家参考.具体如下: asp.net在服务器端运行,是不能在服务器端弹出对话框的,但是C#可以通过在页面输出JS代码实现弹出消息框的效果,这个C#类封装了常用的消息框弹出JS代码,可以在服务器端调用,在客户端显示对话框.不但可以显示JS的警告框,还可以显示模式窗口,非常方便. using S using
这篇文章主要介绍了Jquery 实现弹出层插件,包括遮罩层.插件参数.关闭动作.拖拽效果等,需要的朋友可以参考下 弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position:还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: wid
不管是做网站还是一些应用系统,都免不了要用到一些弹出的效果,在ZJ-BLOG V1.0 Beta2版本我在一些功能使用了网络上比较流行的仿XP关机效果的弹出功能,按目前的反应来说还是效果不错的,下面将此功能整一下儿,如果有需要大家可以直接使用到自己的网站或是应用系统中去. 不在详细的说明代码了,帖出代码之前需要说明一点儿的是IE环境下,由于下拉框(select元素)优先级太高了,弹出的div元素无法盖住下拉框元素,很烦人的一个IE的BUG(个人认为是BUG ^o^),我使用的方法是在弹出时隐藏掉
今天开始测试,google.IE 7.8 都没有问题 测试说 IE10,11 下有问题,经过测试确实, 系统一进入时就弹出一个 modal,强制登陆,但是 IE10 下只有遮罩没有输入框 各个属性测了下,发现是 modal 的 fade 属性在作怪,去掉 fade 之后就好了 即由之前的 变为
模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式;通过模态窗口,可以提高网站的可用性;你可以在你的邮件里收到用户发送的反馈消息 模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式.通过模态窗口,可以提高网站的可用性.正好项目的需要,有个客户想要模态弹出的窗体来提交网站的反馈,经过一番测试实现了,我使用jQuery fancybox插件来创建一个漂亮的模态窗体,提交表单的数据在服务器端实现Ajax调用.你可以在你的邮件里收到用户发送的反馈消息 html代码 hea
本文给大家分享的是一则使用EasyUI实现第二层弹出框的方法,核心代码是网友提供,这里结合自己的项目需求,完善了下,推荐给大家. 这是网友在EasyUI拓展时的代码. 可以根据实际需要自行修改. $.modalDialog2.handler 这个handler代表弹出的dialog句柄 $.modalDialog2.xxx 这个xxx是可以自己定义名称,主要用在弹窗关闭时,刷新某些对象的操作,可以将xxx这个对象预定义好 $.modalDialogTwo = function(options)
KGModal 网站 : /kgn/KGModal KGModal 是一个易用的模态弹出窗口控件,可根据显示的内容自动调整弹窗的大小以适应内容最适合的大小显示,提供效果很棒的动画. 授权协议: MIT 开发语言: Objective-C 操作系统: iPhone/iPad/iPod
这篇文章主要介绍了JS+CSS实现实用的单击输入框弹出选择框的方法,实例分析了javascript操作select及button的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现实用的单击输入框弹出选择框的方法.分享给大家供大家参考.具体实现方法如下: &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/
点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,已经确定了不是css样式的问题,接下来与大家共同探讨下究竟是什么问题导致页面变乱 点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Response.Write(&&script language=javascript&&); Response.Write(&window
弹出框只弹一次,看到网上也就写的很多,可以直接使用的没有几个,下面与大家分享个修改之后的代码,需要的朋友可以参考下 弹出框只弹一次,看到网上也就写的很多,但真正能拿过来用的没有几个.以下是我修改之后的代码,供参考. 这段代码是使用了cookie来控制的,首先使用cookie让浏览器记住这个页面已经打开过一次,如果再次引用这个页面已经打开一次了,如果再次引用这个页面的话将不进行打开.而浏览器一旦关闭浏览器,保存这个记录的cookie文件将被删除.因此关闭浏览器,再次打开的话弹出窗口还会出现的,从而
这篇文章主要介绍了BOOTSTRAP时间控件显示在模态框下面的bug修复,需要的朋友可以参考下 一针见血:修改 bootstrap-datepicker.js 文件 var zIndex = parseInt(this.element.parents().filter(function(){ return $(this).css('z-index') !== 'auto'; }).first().css('z-index')) +10; 将+10改为+; 原因:z-index是设
这篇文章主要介绍了javascript制作的网页侧边弹出框思路及实现代码,需要的朋友可以参考下 到周末了,明天该总结一下了,感觉学到了些东西,又感觉没学多少东西,具体明天再分析吧,先来看看今天要分析的问题. 这样的图片相比大家都很熟悉: ------------ 今天我们就来分析制作一下,先来介绍下这种弹出框的特点: * 始终依附在页面边框上 * 不随页面的上升下降而改变位置 * 鼠标经过时,会弹出详细信息,离开时,恢复最初状态 这样我们就能大概想到几个可能会用到的功能:postion的绝对定位
这篇文章主要介绍了关闭浏览器窗口时弹出提示框,并且可以通过函数控制其失效,需要的朋友可以参考下 在js页面加载时运行如下代码 window.onbeforeunload = function(){ return &未保存的内容可能会丢失&; }; 此代码在火狐和ie下不会显示return的值在google浏览器下显示此文字. 失效控制 触发js运行如下: 复制代码 代码如下: window.onbeforeunload = function(){};
这篇文章主要介绍了js中confirm实现执行操作前弹出确认框的方法,是执行删除等操作时常用的功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm &a href=&#& onclick= &if(confirm( '是
具体思路为:.首先要定位实现这种效果的元素 ,本次通过class:如果是动态显示不同的提示内容,需设置通过JQ给定位到元素加上 mouseover 和mouseout 事件 思路: 1.首先要定位实现这种效果的元素 ,本次通过class 2.如果是动态显示不同的提示内容,需设置title 3.通过JQ给定位到元素加上 mouseover 和mouseout 事件 4.再完善下,弹出框跟随鼠标在目标元素上移动 5.再把 mouseover .mouseout 合并成 hover //页
alert弹出框出现乱码的情况,想必大家都有遇到过吧,其实解决方法很简单设置charset=utf-8在试试,看看是不是好了 我的页面是: &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /& 在页面中调用了另一个function.php文件里面的一个函数, 这个函数里面的代码是: cho '&SCRIPT language=Javascript&alert浅析BootStrap中Modal（模态框）使用心得
作者：heshouyou
字体：[ ] 类型：转载 时间：
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。本文给大家分享BootStrap中Modal（模态框）使用心得，一起看看吧
BootStrap中Modal（模态框）描述
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。
一、modal使用：
1.1、登录bootstrap官网，点击下载Bootstrap
1.2、导入对应的样式文件css
1.3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jQuery，所以我们要在导入bootstrap.js前面导入jquery.min.js
对应导入代码：
&!--导入样式--&
&link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/&
&link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" /&
&link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/&
&link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/&
&!--导入bootstrap.js包--&
&script src="jquery/jquery-3.1.1.min.js"&&/script&
&script src="Bootstrap/js/bootstrap.min.js"&&/script&
1.4、从官网找到一个案例使用：
&h2&创建模态框（Modal）&/h2&
&!-- 按钮触发模态框 --&
&button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&开始演示模态框&/button&
&!-- 模态框（Modal） --&
&div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-hidden="true"&&&/button&
&h4 class="modal-title" id="myModalLabel"&模态框（Modal）标题&/h4&
&div class="modal-body"&在这里添加一些文本&/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&&!-- /.modal-content --&
&/div&&!-- /.modal --&
二、modal打开：
2.1、静态打开：通过data属性打开隐藏模态框
设置按钮button的data-toggle:"modal"（以模态框的形式打开），data-target:"#myModal"（设置为modal的id）
2.2、动态打开：以jquery代码为例
$("#myModal").modal({
remote:"test/test.jsp";//可以填写一个url，会调用jquery load方法加载数据
backdrop:"static";//指定一个静态背景，当用户点击背景处，modal界面不会消失
keyboard://当按下esc键时，modal框消失
remote处可以填写jsp路径或者html路径，用来给modal框注入内容
2.3、动态打开事件：
在modal框加载同时，提供几个方法用来控制modal框
$("#myModal").on("loaded.bs.modal",function{
//在模态框加载的同时做一些动作
$("#myModal").on("show.bs.modal",function{
//在show方法后调用
$("#myModal").on("shown.bs.modal",function{
//在模态框完全展示出来做一些动作
$("#myModal").on("hide.bs.modal",function{
//hide方法后调用
$("#myModal").on("hiden.bs.modal",function{
//监听模态框隐藏事件做一些动作
2.4、解决remote只加载一次问题：
我们在使用js动态打开modal框使用remote请求数据，只会加载一次数据，所以我们需要在每次打开modal框钱移除节点数据。
解决方案：
$("#myModal").on("hiden.bs.modal",function{
$(this).removeData("bs.modal");
2.5、解决事件监听多次：
第一次打开modal框正常，第二次，第三次，第n次打开就有可能会出现事件监听多次的奇怪问题（尤其是多个modal窗口叠加，出现这种问题的几率更高，我大致判断有可能是组件bug），所以无奈之举的办法，只适合应急使用：就是强行让他只调用监听一次
int count = 0 ;
$("#myModal").on("loaded.bs.modal",function{
if(++count == 1){
//调用你需要的方法
//在模态框加载的同时做一些动作
总结：modal框是个很好用的组件，不过官方文档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。
以上所述是小编给大家介绍的浅析BootStrap中Modal（模态框）使用心得，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}