JavaScript 练手小技巧：页面高亮操作提示和蒙板

在页面上，有时候会遇到操作提示，如下图所示。
可以很直观的告诉用户，关键的操作在哪里，有什么做作用。

需要说明的是，被高亮的部分，并不是目标的真实标签，而是用的其他标签模拟的。
真实的标签被 mask 层盖住了，在下方呢。

标签高亮的部分和操作提示框，都是用 js 动态生成的。

这里关键的知识点：

1. 要用 JS 获取目标标签的位置。
   el.getBoundingClientRect() 可以获得标签距离窗口的位置。
   window.pageXOffset
   window.pageYOffset
   则是获取页面左，上边滚动出去部分的长度。
   利用它们相加，可以得到目标标签在页面中的绝对位置。再把【高亮】标签放在相同位置就可以。
2. 要能动态生成提示标签和遮罩层（一般是半透明的黑色）
3. 还要用到 CSS 中的定位。

为了更直接的模拟真实情况，我采用了一些标签来模拟页面的结构。
HTML 代码如下：

<!-- 模拟头部 -->
<header class="header">
    模拟头部
</header>
<!-- 模拟头部 end -->
<!-- 模拟导航 -->
<nav class="mainNav">
    模拟导航
</nav>
<!-- 模拟导航 end -->

<!-- 主体部分 -->
<main class="pageMain">
    <ul class="sidebar">
        <li id="step1"><a href="#">操作第一步</a></li>
        <li><a href="#">操作第二步</a></li>
        <li><a href="#">操作第三步</a></li>
    </ul>
    <div class="other">
        模拟其他部分
    </div>
</main>
<!-- 主体部分 end -->

基本样式如下：

.posa{
    
    
    position: absolute;
}
.header{
    
    
    height: 200px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: #eee;
}
.mainNav{
    
    
    height: 80px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: #5f5fd7;
}
.pageMain{
    
    
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: #eee;
}
.sidebar{
    
    
    width: 200px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    border:1px #666 solid;
    border-bottom:none;
}
.sidebar a{
    
    
    display: block;
    border-bottom:1px #666 solid;
    color: #333;
}

.other{
    
    
    height: 700px;
    background: #708af5;
    font-size: 30px;
    color: #fff;
}

.mask{
    
    
    position: fixed;
    top:0;
    right:0;
    bottom: 0;
    left:0;
    background: rgba(0, 0, 0, 0.48);
}

.tips{
    
    
    background: #fff;
    position: absolute;
    line-height: 50px;
    color: #333;
    display: block;
    text-align: center;
}

.tipsc_content{
    
    
    margin-left: 200px;
    padding-top: 100px;
    margin-right: 80px;
}
.tipsc_btn{
    
    
    padding-top: 30px;
}

.tipsc_btn button{
    
    
    outline:none;
    width: 100px;
    height: 40px;
    background: #09a366;
    color: #fff;
    border:none;
    cursor: pointer;
}

JavaScript 代码如下：

// 获取目标标签
let step1 = document.getElementById("step1");
let body = document.getElementsByTagName("body")[0];

let tips = null,
    mask = null,
    tipsContent= null;
// 创建标签。默认生成 mask 标签
let makeElement = function({
    
    id="mask",classN="mask",content = ""}={
    
    }){
    
    
    let eId = document.getElementById(id);
    if( !eId ){
    
     // 判断 mask 是否存在
        eId = document.createElement("div");
        eId.id = id;
        eId.className =classN;
        eId.innerHTML = content;
        body.appendChild( eId );
        return eId ;
    }else{
    
    
        return eId;  // mask 已经存在，不需要再创建。
    }
};
// 去掉遮罩层
let removeTag = function(tag){
    
    
    tag.parentNode.removeChild( tag );
};

// 获取要提示的内容的位置。这里是 li#step1
let getPostion = function(tag){
    
    
    let x = tag.getBoundingClientRect().x ;
    let y = tag.getBoundingClientRect().y ;
    return {
    
    x:x,y:y};
};
// 设置tips的位置
let setPosition = function(tips, {
    
    x="0",y="0",w="0",h="0"}={
    
    }){
    
    
    tips.style.left = x + "px" ;
    tips.style.top = y+ "px" ;
    tips.style.width = w+ "px"
    tips.style.height = h + "px"
    console.info(tagP.x , tagP.y );
};
// 获取要提示的内容的标签位置
let tagP = getPostion(step1);
// 生成 mask
mask = makeElement();
// 生成目标标签的高亮框
tips = makeElement({
    
    
    id:"tips",
    classN:"tips",
    content :"操作第一步"    // 伪装原标签的内容
});
setPosition(tips, {
    
    
    x:tagP.x + window.pageXOffset,
    y:tagP.y + window.pageYOffset,
    w:step1.offsetWidth ,
    h:step1.offsetHeight
});



// 生成提示内容框
tipsContent = makeElement({
    
    
    id:"tipsContent",
    classN:"tipsContent posa",
    content :`<div style="width: 490px; height: 300px;background:url('images/op_tips.png') no-repeat;">
                <div class="tipsc_content">
                    根据项目内容调整样式
                    <div class="tipsc_btn">
                         <button type="button" id="okBtn">确定</button>
                    </div>
                </div>
        </div>`
});
setPosition(tipsContent, {
    
    
    x:tagP.x + window.pageXOffset+200,
    y:tagP.y + window.pageYOffset-100,
    w:490,
    h:300
});

// 点击“确定”按钮
let okBtn = document.getElementById("okBtn");
okBtn.addEventListener("click",function(){
    
    
    removeTag(mask);
    removeTag(tips);
    removeTag(tipsContent);
});

// 当窗口调整大小时候，调整 tips 位置。
window.addEventListener("resize",function(){
    
    
    tagP = getPostion(step1);
    setPosition(tips,tagP);
});

简单进行了下函数封装，但是还是觉得代码写的不够完美。比如用JS生成了样式，其实可以把一些样式封装在CSS 中。