css的布局问题（一个网站指引）

Question

1.这是一个页面布局的问题，更新后的步骤指引；
2.需求是进入页面后出现一个遮罩层，留出的展示窗口不被遮罩层影响，正常显示（这里目前采用的是提高该处的盒子层级）；
3.在指引过程中，展示窗口中的内容不能被编辑，结束后可以正常被点击；
4.页面是不能滚动的，只能通过点击下一步进行页面的位置变化；
5.总共有两个展示窗口。

Answer 1

HTML代码

 <div class="mask">        <div class="box1">            <!-- 盒子里写你想要的内容 -->             <!-- 下一步按钮 -->            <div class="next"></div>        </div>        <div class="box2">            <!-- 盒子里写你想要的内容 -->            <!-- 完成按钮 -->            <div class="finished"></div>        </div>    </div>

css代码

.mask{          position: fixed;          top:0;          left:0;          width: 100vw;          height: 100vh;          background:rgba(0,0,0,.3);      }      .box1,.box2{          position:absolute;          top: 50%;          left: 50%;          /* 实际上的宽高按你自己需求写 */        width:500px;          height: 500px;        background:#fff;        transform: translate(-50%,-50%);      }      .box2{          display: none;      }

JS（JQ）代码

  $('.next').click(function(){            $('.box1').hide();            $('.box2').show();        });        $('.finished').click(function(){            $('.mask').hide();        })

css的布局问题（一个网站指引）

解决方案