bootstrap添加多个模态对话框支持
因为项目需要，在页面交互上要弹出多个dialog窗口，而bootstrap的modal支持弹出dialog窗口，但是如果在此基础上，会出现遮罩层越来越多，背景越来越黑的情况。
代码具体如下：
(function(){
modal = {};
modal.openDialog = function(url, title, width, height,
modal.closeDialog = function(id){};
window.modal =
openDialog函数中传入了id，即为即将生成的dialog的div的id，url为dialog中iframe的src，id也将写在modal函数的参数option中。
调用多个dialog时，需要传入不同的id；
backdrop: function (callback) {
& var that = this
& & , animate =
this.$element.hasClass('fade') ? 'fade' : ''
& if (this.isShown &&
this.options.backdrop) {
& & var doAnimate =
$.support.transition && animate
& & this.$backdrop = $('
.appendTo(document.body)
& & this.$backdrop.click(
this.options.backdrop == 'static' ?
& $.proxy(this.$element[0].focus,
this.$element[0])
$.proxy(this.hide, this)
& & if (doAnimate)
this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
& & if (!callback) return
& & doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
& } else if (!this.isShown &&
this.$backdrop) {
this.$backdrop.removeClass('in')
& & $.support.transition
&& this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, callback) :
callback()
& } else if (callback) {
& & callback()
函数中&this.$backdrop = $('
').appendTo(document.body)即为添加遮罩层。
遮罩层实现为在body后添加，并设置该div的z-Index为99999；
我们接下来的实现也是用z-Index，考虑到一层一层网上叠加z-Index，遮罩层只一个即可，而不同的dialog只需比遮罩层的z-Index高即可。
那就仅第一个dialog打开的时候添加遮罩层，其余时候对遮罩层的style中z-Index进行增大即可。
在Modal类代码中添加类对象，Modal.ids = [];
在进行添加遮罩层时，即var doAnimate =
$.support.transition && animate
这行代码后对id进行push，再进行判断dialog个数
dialogId = option.
Modal.ids.push(id);
if(Modal.ids.length==1){
this.$backdrop = $('
').appendTo(document.body);
$("#"+id).attr("style","z-Index:100000!important");
var perviouszIndex =&$(".modal-backdrop").css("z-Index");
this.$backdrop =
$(".modal-backdrop").attr("style","z-Index:"+(perviouszIndex+2)+"!important");
$("#"+id).attr("style","z-Index:"+(perviouszIndex+3)+"!important");
而当关闭时，需要对遮罩层的z-Index重新计算，dialog被隐藏了就不需要了，因为再次打开时会再次计算几次
关闭时，对遮罩层的操作在
removeBackdrop: function () {
& this.$backdrop &&
this.$backdrop.remove()
& this.$backdrop = null
}函数中，改写该函数即可
removeBackdrop: function () {
if(Modal.ids==1)
this.$backdrop && this.$backdrop.remove();
this.$backdrop =
Modal.ids.shift();
this.$backdrop.attr("style","z-Index:"+(perviouszIndex-2)+"!important")；
Modal.ids.shift();
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。function showCommentBoxHistory(eventid) {
if(!eventid){
var arr = new Array();
if ($("input[name^='selectIDs_history[]']:checked").length == 0) {
alert('请选择告警项!');
$("input[name^='selectIDs_history[]']:checked").each(function(index, element) {
arr.push($(this).val());
id_ = arr.join(',');
$("#message").val("");
$("#ack_eventid").val(id_);
$('#myModal').modal('show');
上面是我弹出Modal的代码，但是如果后台校验错误，就会更改Modal标题的文字和样式，然后关闭Modal再选择别的记录弹出Modal，发现重新弹出的Modal还是用的之前的标题和文字样式，如附件图片所示。
我想不管怎么样，每次$('#myModal').modal('show')的时候，$('#myModal')应该初始化，找了好久都没找到这样的方法，不知哪位大神知道，指定一二，多谢了。
用加载url的方法
或者每次关闭后将页面的那个元素删掉，每次打开时重新append进行
已解决问题
未解决问题收藏，1.8k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我在使用Twitter的前端工具包Bootstrap V3 时,在一个页面定义了3个模态窗口后 模态窗口不能正常显示是怎么回事？有什么解决办法没有？谢~
这个问题已被关闭
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
问题解决了，modal中少写了个&/div&标签。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我这还在模态窗口上弹模态窗口呢 0.0
id至少要不一样吧。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
绝对不是boot的限制，应该是你哪个地方的指向有问题。建议回到官方文档对比使用说明和自己的代码找找原因
这个问题已经被关闭无法回答
不要错过该问题的后续解决方案
如果你没找到答案，记得登录关注哦，大家会尽全力帮你解决的 ^___^
分享到微博？
关闭理由：
删除理由：
忽略理由：
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
内容质量差，或不适合在本网站出现
无意义讨论型问题
其他原因（请补充说明）
举报理由：
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
内容质量差，或不适合在本网站出现
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：查看: 212|回复: 8
yii2中怎么使用Bootstrap的模态弹出框modal
主题帖子积分
注册会员, 积分 73, 距离下一级还需 127 积分
注册会员, 积分 73, 距离下一级还需 127 积分
如题，我是在yii2的项目中想运用这个弹出框，按照Bootstrap中的教程写出如下代码：
&a data-toggle=&modal& href=&#mymodal& class=& btn btn-primary& &点击我会弹出模态弹出窗&/a&
&div class=&modal fade& id=&mymodal&&
& & &div class=&modal-dialog&&
& && &&&&div class=&modal-content&&
& && && && &&div class=&modal-header&&
& && && && && & &button type=&button& class=&close& data-dismiss=&modal&&&span aria-hidden=&true&&&&/span&&span class=&sr-only&&Close&/span&&/button&
& && && && && & &h4 class=&modal-title&&模态弹出窗标题&/h4&
& && && && &&/div&
& && && && &&div class=&modal-body&&
& && && && && & &p&模态弹出窗主体内容&/p&
& && && && &&/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&
& && &&&&/div&
& & &/div&
&/div&复制代码
但是页面却无法弹出，如果直接将class改成show，页面却可以显示，请大神求教？谢谢！
主题帖子积分
有什么错误信息吗，你打开console看看
主题帖子积分
注册会员, 积分 73, 距离下一级还需 127 积分
注册会员, 积分 73, 距离下一级还需 127 积分
没有显示错误信息，当点击按钮后，地址栏中后面也跟上了#mymodal，但是就是无法弹出，如果我改成&div class=&modal show& id=&mymodal&&复制代码
加载页面后弹出框会直接显示在页面。
主题帖子积分
注册会员, 积分 115, 距离下一级还需 85 积分
注册会员, 积分 115, 距离下一级还需 85 积分
奇怪。我拿你的代码去测试。可以弹出。
主题帖子积分
注册会员, 积分 73, 距离下一级还需 127 积分
注册会员, 积分 73, 距离下一级还需 127 积分
我单独拿出来测试也是可以的，但是放在yii项目里 就不行了，是不是在yii里面使用的方法不同？我还在看yii源码里面的bootstrap部分，但是全英文，龟速···
主题帖子积分
注册会员, 积分 115, 距离下一级还需 85 积分
注册会员, 积分 115, 距离下一级还需 85 积分
我单独拿出来测试也是可以的，但是放在yii项目里 就不行了，是不是在yii里面使用的方法不同？我还在看yii源 ...
我就是放到yii项目了的啊
主题帖子积分
注册会员, 积分 73, 距离下一级还需 127 积分
注册会员, 积分 73, 距离下一级还需 127 积分
能看看你的代码吗？还是有什么其他地方不同的，或者我忘了添加什么？
主题帖子积分
注册会员, 积分 73, 距离下一级还需 127 积分
注册会员, 积分 73, 距离下一级还需 127 积分
找到原因了，是因为没有引入bootstrps的modal.js文件，还请教到一位大神说，另一种方法是可以直接使用yii里面的modal组件，会自动引入modal.js文件，不过还没有看懂怎么用，还是使用的bootstrps原版的
主题帖子积分
注册会员, 积分 115, 距离下一级还需 85 积分
注册会员, 积分 115, 距离下一级还需 85 积分
找到原因了，是因为没有引入bootstrps的modal.js文件，还请教到一位大神说，另一种方法是可以直接使用yii里 ...
我的是在公用模板那调入了JS了。所以。。。
Powered by