bootstrap多个modal实现只可以操作当前modal，其他modal不可操作

最新推荐文章于 2022-03-17 19:09:42 发布

小小鸟008

最新推荐文章于 2022-03-17 19:09:42 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36412715/article/details/104520974

版权

前端专栏收录该内容

35 篇文章 3 订阅

订阅专栏

思路：

如两个modal,在第一个modal上又显示第二个modal。

默认情况下，两个modal可以同时操作。
但如果想打开第二个modal的时候，禁止操作第一个modal上的内容，可以通过再创建一个新的modal,作为中间层。
这个中间层modal的位置和大小要能覆盖住第一个modal，但内容为空，同时设置这个中间层modal的background-color为#000，opacity为0.3。
在第二个modal显示的时候，让这个中间层modal也显示，但这个中间层modal的z-index要高于第一个modal，同时低于第二个modal。
这样在第二个modal显示的时候，第一个modal就变成了半透明的状态且不能操作了。
第二个modal隐藏的时候，中间层modal也要隐藏。

记录一下项目中遇到的相关问题和解决方法：

modal中使用select2出现不能显示下拉框问题：
解决方法：因为z-index的级别不够，被中间层给盖住了。设置如下属性：
.select2-container .select2-container–open{
z-index:99999;
}
2.select2在绑定change事件后，改变select框的值没有更新到select框中。
解决方法：在绑定change前先解绑。同时解绑后，需要重新调用一下select2。

$("#psuSelect").off('change');
$("#psuSelect").select2({
	language: {
		noResults: function () {
			return local.getJSLocale("NoResults");
		}
	},
	placeholder: local.getJSLocale("ChooseCPU"),
	allowClear : true
}); 
$("#psuSelect").on('change',function(){})

modal中使用select2出现不能显示下拉框问题：
因为z-index的级别不够，被中间层给盖住了。
.select2-container .select2-container–open{
z-index:99999;
}

下面是我做的实验，可以实现我想要的功能。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">       
        #firstmodal {
			position: absolute;
			top:10%;
			left:50%;
        }
        #secondmodal {
			position: absolute;
			top:10%;
			left:50%;
			z-index:1090;
        }
		#mid_layer {
		  position: absolute;
		  top:10%;
		  left:50%;
		  width:562px;
		  height:551px;
		  z-index: 1060;
		  background-color: #000;
		  display:none;
		  opacity: 0.3;
		  filter: alpha(opacity=30);
		}
    </style>
    <script type="text/javascript">
        $(function() {
            $('#m1').on("click", function() {
                $('#firstmodal').modal('show');
            });
            $('#m2').on("click", function () {
                $('#secondmodal').modal('show');
				$('#mid_layer').modal('show');
            });
			$('#btn2').click(function(){
				$('#mid_layer').modal('hide');
			})
        });
    </script>
</head>
<body>
        <div class="content" style="margin-left: 100px;margin-top: 100px;">
            <button class="btn btn-primary btn-lg" id="m1">打开第一层模态窗口</button>
        </div>
		<p>鼠标点击一下非模态框部分的空白区域，第二个模态框会先隐藏，再点击，第一个模态框才会隐藏</p>
		<p>按ESC，第一个模态框会先隐藏，鼠标点击一下第二个模态框，再按ESC，第二个模态框才会隐藏</p>
		<div id="mid_layer" class="modal"></div>
        <div id="firstmodal" class="modal container fade"  tabindex="-1" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">第一层模态窗口</h4>
            </div>
            <div class="modal-body">
                <p>
                    <button class="btn btn-primary btn-lg" id="m2">打开第二层模态窗口</button>
                    第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                </p>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
            </div>
        </div>
        <div id="secondmodal" class="modal container fade" tabindex="-1"  style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">第二层模态窗口</h4>
            </div>
            <div class="modal-body">
                <p>
                    第二层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                </p>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button id='btn2' type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
            </div>
        </div>
</body>

小小鸟008

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap多个modal实现只可以操作当前modal，其他modal不可操作

思路：如两个modal,在第一个modal上又显示第二个modal。默认情况下，两个modal可以同时操作。但如果想打开第二个modal的时候，禁止操作第一个modal上的内容，可以通过再创建一个新的modal,作为中间层。这个中间层modal的位置和大小要能覆盖住第一个modal，但内容为空，同时设置这个中间层modal的background-color为#000，opacity为0....
复制链接

扫一扫

专栏目录