本文例項為大家分享了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.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 中。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。