有关bootstrap的modal.js和sco.js中sco.modal.js的小吐槽-晟儿&小栈
这是我在无聊的时光里随便弄一个小博客玩玩的，纯当娱乐，这里主要是我对日常工作学习的记录，和对生活的吐槽感悟，才刚弄得，文章不多，也不经常写，不过偶尔会更新一下，各位看官也别较真，如果在哪天无聊的下午沐浴慵懒的阳光想起我，就上来逛逛吧。
&&&&事情是这样的，前些日子我所接手的项目中涉及到很多浮动框的东西，当然我是用自己的方法写出的一个效果，简单也不酷炫。但是因为公司的网站是用bootstrap搭建的(ps:bootstrap3.0.0，此处有伏笔)。虽然这个框架刚上手还有很多不了解，但我依稀记得，该框架是自定义了一个弹出浮动层的效果。当然这是事后我发现的。
&&&&于是按照他们的文档自己测试了一下：这是在正常不过的。
&&当然，我开始想问题的时候事情不会这么简单，因为一开始我看到的是Bootstrap中文网中的这个开源项目，于是，找抽的节奏开始了：
&&& sco.js中的modal官方效果是这样滴：&&&&这个很好啊，而且根据demo的说明，这段内容是调用额外的lipsum.html页面中的内容实现的，这个仿ajax的效果确实让我心动。于是英语不好的我根据这样的提示自己试了一下，此处还需要引用该项目的sco.modal.js，结果是这个样子滴：&&&&额，很正常bug是难免的，至少样子出来了，于是开始找原因，起初我认为，是不是还需要写上一些代码调用什么的（ps：翻译君们，你们翻译外国的文档能全翻译完吗，后面的全是英文，搞得我看不懂），在试了你n次之后还是不行，所以开始怀疑是否是样式的问题，于是打开fierbug。原来案例中的样式是这样的：
&&& background-clip: padding-
&&& background-color:&#FFFFFF;
&&& border: 1px solid rgba(0, 0, 0, 0.3);
&&& border-radius: 6
&&& box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
&&& left: 50%;
&&& margin-left:&-280
&&& outline: 0
&&& position:
&&& top: 10%;
&&& width: 560
&&& z-index: 1050;
而我做出来后样式默认是这样的：
&&& bottom: 0;
&&& display:
&&& left: 0;
&&& overflow-x:
&&& overflow-y:
&&& position:
&&& right: 0;
&&& top: 0;
&&& z-index: 1040;
&&& so why？因为，根据fierbug的提示，他们都是引用自bootstramp.min.css中的样式，为什么会有这样的不同呢？于是，本着不明觉厉的感觉我把这段样式引用到自己的测试页面里，结果神奇的事情发生了，为了演示，我特意把页面做的高一点，注意看滚动条：&&&&这什么情况，这完全不存在底边的节奏有考虑过我的感受吗，于是我开始重新思考人生，终于，这回不在坑爹了。直到我查看网页源代码，才发现这个不争的事实，官方demo中的bootstrap.css是2.3.1版本的，而我的是用3.0.0版本的（记得前面的伏笔了吗），于是——尼玛不出鬼才怪呢。于是这回总算对了：&&&&似乎问题到这就应该完事了，但是思考一下，熟悉的人知道，bootstrap的2.3系列和3.0系列在标签命名上是有很大不同的，换句话说，如果我用3.0系列那么我将不得不放弃sco.modal.js的使用，也许你会问，为什么不放弃，3.0.0不是有其他代替方法吗。没错，但是sco.modal.js仍然有它的优势：
sco.modal.js可调用外部html
&&&&如果用sco.modal.js我只需要加入几个标签就可以调用外部的html里面的内容，但是3.0.0是需要将后面要显示的内容及装载内容的盒子一并写到html里面，这势必增加页面长度。
&&&&相比之下3.0.0中的方法只能使用事先编辑好在页面内的内容，不能引用外部文件，后期修改的话，明显第一种好一些。那么有没有一种完美的解决方案既使用3.0.0又可以使用sco.modal.js呢？答案是至少在我的实验内：没有完美的办法。
&&&&除非你愿意做一些让步：像我之前那样用2.3.1中的modal样式替换掉3.0.0中的modal样式，然后给替换过得样式一个定高，将overflow设置为auto。像这样：
&&&&不过，就在写这篇博文时，我突然想到了一个貌似靠谱的方法，不过实际应用应该还会有很多问题，这里先说下思路和实现效果：
&&&&思路很简单，就是判断要加载的页面高度，然后让#modal这个div的高度等于加载页面内容的高度。可是实际发现，完成后它会默认为当前页面的body高度。于是调整思路：
1.我给要加载页面中的元素一个总的标签包起来，然后获取该标签的高度。
2.本来是想计算该高度和.modal-header的高度的和，但是实际发现，一旦加载获取不到modal-header的高度，只能放弃(如果看官知道怎样获取，欢迎告诉我)，于是我只好在此基础上加一个定值100。
3.让#moal的高度为计算后的结果。
注意，这部分的jquery代码必须写在需要加载的页面里，贴图如下：
在这之后，奇迹出现了：&&&&总结经验教训，我认为这不是一个非常靠谱的方案，如果你用的是2.3系列那无所谓，如果是3.0的还是用它自带的吧，这种小规模改造，暂时看上去没问题，但说不定会对其他的产生影响。
---------------------------OK，折腾完毕，下台鞠躬^_^------------------------------
很喜欢此文字
(C) | Powered by请选择邮箱类型
插件描述：网页里的下位列表，英文名drop down list，几乎所有网站都会用到这个组件。bootstrap已经设计了一个下拉列表的基本样式，在表单中展示已经够用了
网页里的下位列表，英文名drop down list，几乎所有网站都会用到这个组件。bootstrap已经设计了一个下拉列表的基本样式，在表单中展示已经够用了，但如果我们希望有更多一些的功能，不妨学一下Bootstrap-select
相关插件-选择框
讨论这个项目（16）回答他人问题或分享插件使用方法奖励jQ币
貌似用不了
可以用的。
阳光的爸爸0
那是google的库引不到的原因。
MayDay乱世浮生0
看了这个我感觉自己像个文盲
插件信息已经改为引用百度的库。
mytestlife0
这个挺厉害的啊！
为何不能动态增加或删除option
动态增加或删除options时，需要重新再初始化才生效。
为什么下载到本地，谷歌上打不开？
刚检测，本地chrome打开正常。
D.Onlyone0
搜索功能输入中文输入不进去？
问题已解决 &把bootstrap-select.js文件中的that.$lis.not('.hidden,&.divider,&.dropdown-header').eq(0).addClass('active').children('a').focus();这句话删掉就可以输入汉字了&
Jennifer-JFH0
怎么样改成中文
为什么不能设置选中值呢
good mning0
为什么不能输入汉字呢
隔世晗萧(wage)0
menuStyle = typeof getComputedStyle === 'function' ? getComputedStyle(menu) : false在ＩＥ８下出现& 'getComputedStyle' 未定义
你好，页面最下面的
搜索下拉选择框，ie9输入汉字（选项里面有的汉字），输入一个汉字，会出现两个汉字，有办法解决吗？ 其它浏览器正常
怎么把值获取成数据库里头的啊
&hello! &the chick-icon in my html ddin't display&& can you tell me why?
PROMULGATOR
关注作者 (66)
收藏此插件 (20)
我当前jQ币余额：正在获取..
已下载次数：3689
所需jQ币：0bootstrap 貌似对IE7，IE8支持得不好，有什么解决方案_百度知道
bootstrap 貌似对IE7，IE8支持得不好，有什么解决方案
我有更好的答案
没办 家建议用低版本IE
bootstrap官方表示支持IE9+
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁bootstrap 貌似对IE7，IE8支持得不好，有什么解决方案_百度知道
bootstrap 貌似对IE7，IE8支持得不好，有什么解决方案
换用低版本, 自写条件包含语句 些功能本家设计候没考虑低版本IE, 要自想办替换/解决, 要换别 我给单位做WEB应用, 全单位都IE6直接让换三浏览器
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}