亲测有效:layui实现同页面多个弹出框,且弹框间互不影响

起因:因项目需求,用layui写静态页面时,发现页面中有多个弹框效果,且每个弹出框内容各不相同,粘了框架的“居中弹出”方法,但发现不管点击哪一个按钮,出现的都是第一个弹出框内容。

解决方案:无奈下,找了公司的前端大佬,她修改后的小deom如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>测试多个弹框效果</title>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<link rel="stylesheet" href="../css/layui.css">
    </head>
    <style type="text/css">
	.Btn1, .Btn2, .Btn3{
	    margin: 20px;
	}
	.tan1, .tan2, .tan3{
	    padding: 20px;
	}
    </style>
<body>
    <button data-type="auto" class="layui-btn Btn1">
	<i class="iconfont icon-daochu1"></i>
	弹出框1
    </button> 
    <button data-type="auto" class="layui-btn layui-btn-normal Btn2">
	<i class="iconfont icon-daochu1"></i>
	弹出框2
    </button> 
    <button data-type="auto" class="layui-btn layui-btn-warm Btn3">
	<i class="iconfont icon-daochu1"></i>
	弹出框3
    </button> 
    <div class="tan1" style="display:none;">
	弹出框1内容
    </div>
    <div class="tan2" style="display:none;">
	弹出框2内容
    </div>
    <div class="tan3" style="display:none;">
        弹出框3内容:
    </div>
 <script src="../js/jquery-3.1.1.min.js"></script>
 <script src="../js/layui.all.js"></script>
 <script type="text/javascript">
      $(function() {
      // 初始化
      $(".Btn1").click(function() {		
  			layer.open({
  				 type: 1
  				 ,id: 't1' //给弹框命名,防止重复弹出
  				 ,content: $('.tan1')
  					 ,area: ['40%', '40%']	
  					 ,title: '弹出框一'
  					 ,shade: 0.5  // 透明度
  					 ,resize: false
  					 ,scrollbar: false
  					 // ,btn: '关闭全部'
  					 // ,btnAlign: 'c' //按钮居中
  				,yes: function(){
  				  layer.closeAll();
  				}
				// 如果弹出框置于遮罩层下方,下方代码可解决该问题
  				,success: function (tan1) {
  					var mask = $(".layui-layer-shade");
  					mask.appendTo(tan1.parent());   
  				}
  			});	
  		});
  		$(".Btn2").click(function() {
  			layer.open({
  				 type: 1
  				,id: 't2' //给弹框命名,防止重复弹出
  				 ,content: $('.tan2')
  					 ,area: ['40%', '40%']	
  					 ,title: '弹出框二'
  					 ,shade: 0.5  // 透明度
  					 ,resize: false
  					 ,scrollbar: false
  				,yes: function(){
  				  layer.closeAll();
  				}
				// 如果弹出框置于遮罩层下方,下方代码可解决该问题
  				,success: function (tan2) {
  					var mask = $(".layui-layer-shade");
  					mask.appendTo(tan2.parent());   
  				}
  			});	
  		});
		$(".Btn3").click(function() {
			layer.open({
				 type: 1
				,id: 't3' //给弹框命名,防止重复弹出
				 ,content: $('.tan3')
					 ,area: ['40%', '40%']	
					 ,title: '弹出框三'
					 ,shade: 0.5  // 透明度
					 ,resize: false
					 ,scrollbar: false
				,yes: function(){
				  layer.closeAll();
				}
				// 如果弹出框置于遮罩层下方,下方代码可解决该问题
				,success: function (tan3) {
					var mask = $(".layui-layer-shade");
					mask.appendTo(tan3.parent());   
				}
			});	
		});
  	});
 </script>
</body>
</html>

效果如下:

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页