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

问题描述

问 题

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

解决方案

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();
        })

这篇关于javascript - css的布局问题（一个网站指引）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！