一层弹出层、两层弹出层、三层弹出层、多层弹出层随便搞

素颜马尾好姑娘i 2023-07-05 10:17 31阅读 0赞

最近因为一些比较扯的需求，在项目中需要用到多层弹出层，话不多说，先看一下效果：![在这里插入图片描述][20200213212407576.gif]

# 使用情景： #

第一层弹出层打开后我们进行数据操作，这时需要打开第二层弹出层操作一些数据，操作完成后关闭第二层弹出层，并把操作后的数据放到第一层弹出层上。

# 难点 #

其实也没有什么难点，只要把握好遮罩层的高度(z-index)就好。

# 技术点（其实都谈不上技术） #

我这里演示弹出5层

###### 第一步：其实就是搞了5个div设置好样式然后藏起来 ######

###### 第二步：写个弹出事件，在需要弹的地方调用（传入需要弹的容器的id和本次弹出是第几层） ######

### 原理 ###

第一个弹出层打开时遮罩层在第一个弹出层下面，当第二个弹出层打开后遮罩层应该上升到第一个弹出层和第二个弹出层中间，保证第一个弹出层不能被操作，往后以此类推，其实就是不论什么时候遮罩层都在最后一个弹出层和倒数第二个弹出层中间。

页面元素代码(这里我准备了5层弹出层)：

<button id="b1" onclick="cShow('div1',1)">弹出第一层</button>
    
        <div id="cover" class="corver hide "></div>
    
    
        <div id="div1" style="background-color:palevioletred;width: 700px;height: 600px;" class="hide">
            <div style="float: right;margin-right: 5px;" onclick="cShow('div2',2)"><button>第二层</button></div>
            <button onclick="test()">测试</button>
        </div>
    
    
        <div id="div2" style="background-color: orangered;width: 650px;height: 550px;" class="hide">
            <div style="float: right;margin-right: 5px;" onclick="cShow('div3',3)"><button>第三层</button></div>
            <button onclick="test()">测试</button>
        </div>
    
    
    <div id="div3" style="background-color: mediumvioletred;width: 600px;height: 500px;" class="hide">
        <div style="float: right;margin-right: 5px;" onclick="cShow('div4',4)"><button>第四层</button></div>
        <button onclick="test()">测试</button>
    </div>
    
    
    <div id="div4" style="background-color: indianred;width: 550px;height: 450px;" class="hide">
        <div style="float: right;margin-right: 5px;" onclick="cShow('div5',5)"><button>第五层</button></div>
        <button onclick="test()">测试</button>
    </div>
    
    
    <div id="div5" style="background-color: darkred;width: 500px;height: 400px;" class="hide">
        <div style="float: right;margin-right: 5px;" onclick="closeDive()"><button>第六层</button></div>
        <button onclick="test()">测试</button>
    </div>

给这几个div和遮罩层添加样式：

jq弹出事件函数

//第一个参数：弹出层的id
        //第二个参数：当前为第几层弹出层
        function cShow(name,index=1){
            //计算高度
            var index = index*100;
    
            //设置遮罩层高度
            $("#cover").css("z-index",index-50);
            //显示遮罩层
            var strClass = $("#cover").prop("class").replace("hide","");
            $("#cover").prop("class",strClass);
    
    
            //设置弹出层样式
            var obj = $("#"+name);
            obj.css("position","fixed");
            obj.css("top","0");
            obj.css("left","0");
            obj.css("bottom","0");
            obj.css("right","0");
            obj.css("margin","auto");
            //设置弹出层高度
            obj.css("z-index",index);
            //显示弹出层
            var strClass = obj.prop("class").replace("hide","");
            obj.prop("class",strClass);
        }

function cShow(name,index=1)\{  
其实我这个弹出方法不只是多层弹出才能用，只弹出一层也可以使用，有些朋友可能想我只弹出一层何必用你这个，还要传入两个参数，太麻烦，这里为了解决这个问题我给弹出方法第二个参数设置默认值为1，如果你只弹一层，就传一个id就行了，这样的话就算你只弹出一层也可以用我这个方法，而不用每次都写几行代码来实现弹出。

小贴士  
其实第一处弹出可以简写：  
原：

<button id="b1" onclick="cShow('div1',1)">弹出第一层</button>

改后：

<button id="b1" onclick="cShow('div1')">弹出第一层</button>

这样就可以把第二个参数省略掉，因为我在方法声明时给第二个参数设置了默认值1。

个人觉得不论只弹一层还是多层把这个方法作为共同放在需要的项目里都是极好的。

[20200213212407576.gif]: https://img-blog.csdnimg.cn/20200213212407576.gif