2015-12-30 15:59:25 iteye_11803 阅读数 211
开发一个小功能,90%的时间都耗在前台bootstrap弹窗上了,功能需要在弹窗里面再弹窗,浏览器console报错:Uncaught RangeError: Maximum call stack size exceeded,导致页面上一些奇怪的错误。
最后终于发现这也许是bootstrap多层弹窗导致的。搜了一下果然如此,我用了最简单的方式来解决,注释了bootstrap.min.js的这一句代码即可。
enforceFocus:function(){
var t=this;
e(document).on("focusin.modal",function(e){
t.$element[0]!==e.target&&!t.$element.has(e.target).length/*多层弹窗死循环&&t.$element.focus()*/})
},
escape:function(){...}


参考资料:https://github.com/twbs/bootstrap/pull/5022
https://github.com/twbs/bootstrap/issues/4781
http://www.oschina.net/question/723876_121004
http://www.oschina.net/code/snippet_181985_39014
2016-04-21 15:47:16 sunnylinner 阅读数 2988
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>模态弹出框--实现原理解析(二)</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>Bootstrap弹出窗示例</h3>

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
大的模态弹出窗
</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<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>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<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>

<!-- href触发模态弹出窗元素 -->
<a data-toggle="modal" data-target="#mymodal-link" class="btn btn-primary">通过链接href属性触发</a>
<!-- 模态弹出窗内容 -->
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link">
    <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>

<button class="btn btn-primary" type="button">JavaScript触发</button>
<div class="modal fade" id="themodal" tabindex="-1">
    <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><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#themodal").modal("toggle");
    });
  });
</script>
</body>
</html>
<!--fade 过渡动画效果-->
<!--data-toggle 用来控制模态弹出窗口的显示-->
<!--data-target 用来定义要触发的模态弹出窗是哪一个-->
<!--data-backdrop 是否包含一个背景div元素,如果为真,则单击该背景时关闭弹出窗-->
<!--data-keyboard 如果为真,按ESC关闭弹出窗-->
<!--data-show 如果为真,初始化时显示弹出窗-->

几个简单的示例~





2016-06-24 15:17:11 yin767833376 阅读数 8832

下面这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,Bootstrap那个太啰嗦了。如果你钟情Bootstrap的那个遮罩,来看看这篇文章“完全版:Bootstrap弹出层遮罩”。

<div class="theme-popover">
<div class="theme-poptit">
<a href="javascript:void(0);" title="关闭" class="close">×</a>
<h3>登录 是一种态度</h3>
</div>
<div class="theme-popbod dform">
<form class="theme-signin" name="loginform" action="" method="post">
<ol>
<li><h4>你必须先登录!</h4></li>
<li><strong>用户名:</strong><input class="ipt" type="text" name="log" value="lanrenzhijia" size="20" /></li>
<li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>
<li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>
</ol>
</form>
</div>
</div>
<div class="theme-popover-mask"></div>

重要的CSS,里面的内容样式可以根据自己需求修改:

.theme-popover-mask {
z-index: 9998;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.4;
filter:alpha(opacity=40);
display:none
}
.theme-popover {
z-index:9999;
position:fixed;
top:50%;
left:50%;
width:660px;
height:360px;
margin:-180px 0 0 -330px;
border-radius:5px;
border:solid 2px #666;
background-color:#fff;
display:none;
box-shadow: 0 0 10px #666;
}

jQuery代码,点击出现,点击右上角关闭

jQuery(document).ready(function($) {
$('.theme-login').click(function(){
$('.theme-popover-mask').fadeIn(100);
$('.theme-popover').slideDown(200);
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').fadeOut(100);
$('.theme-popover').slideUp(200);
})

})

演示:

2018-09-06 10:05:00 weixin_33785108 阅读数 89
<div class="modal fade" id="loadingModal" data-backdrop="static" data-keyboard="false">
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5 style="color: #ffffff;">数据导入中...</h5>
    </div>
</div>
$('#loadingModal').modal({backdrop: 'static', keyboard: false});
                $("#loadingModal").modal('show');
                $("#myModal").css("z-index","1030"); //被遮罩层的z-index小于遮罩层        

 

转载于:https://www.cnblogs.com/zhuwenxia/p/9596665.html

2018-01-03 23:05:48 Damionew 阅读数 3169

莫名遭遇奇怪的Modal隐藏后出现阴影遮罩层


先是用

$(".modal-backdrop").remove();

去掉阴影,但是又出现一个问题:点击显示Modal模态框,但是闪烁一下又消失了,

然后才知道一切的原因包括上面那个阴影遮罩层都是因为引入了两个bootstrap.js,bootstrap.js和modal.js重复调用,肯定会出现一些问题

没有更多推荐了,返回首页