如何用JavaScript实现遮罩层并且可以指定位置高亮

            想要用Javascript实现一个弹出的全网页遮罩层，并且这个遮罩层可以指定高亮位置，比如高亮被遮住的某一个<div>元素。
            求教前端大神指点一二，给个例子什么的~~拜谢！![图片说明](https://img-ask.csdn.net/upload/201602/09/1455021686_557805.png)

http://www.jb51.net/article/47593.htm

我给你一个小例子吧代码我已经给你了你分类后直接用就可以了最近我也在学习这个知识点还有其他的知识点一起了
我就没有截取出来了。有很多其他的功能一定会帮到你的

index.html

<!doctype html>

锁频遮罩

个人中心

开心
快乐
和黑
哈哈

网站登录

账号:

密码:

base.js

// JavaScript Document
//前台调用
var $ =function(_this){
return new Base();
}
//基础类
function Base(_this){//创建一个类
//创建一个数组来获取一个节点和节点数组
this.elements=[];
if(_this!=undefined){
this.elements[0]=_this;
}

}
//创建一个数组来获取一个节点和节点数组
//Base.prototype.elements=[];这是是在类外面定义的，所以要把它放在类里面进行私有化
Base.prototype.getId=function(id){
this.elements.push(document.getElementById(id));
return this;
};
//获取元素节点
Base.prototype.getTagName=function(tag){
var tags=document.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++){
this.elements.push(tags[i]);
}
return this;
};
//获取Class节点的信息
Base.prototype.getClass=function(className){
var all=document.getElementById('header').getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;

}
//获取某一个节点
Base.prototype.getElement=function(num){
var element=this.elements[num];
this.elements=[];
this.elements[0]=element;
return this;
}
//设置CSS
Base.prototype.css=function(attr,value){//这里的参数是两个，
for(var i=0;i<this.elements.length;i++){

    if(arguments.length==1){//当参数的长度等于1的时候，就返回这个元素的style
    //这个只能获取d行内样式，不能获取demo1.css中的样式
        //return this.elements[i].style[attr];
        return getStyle(this.elements[i],attr);
    }
    this.elements[i].style[attr]=value;
    }
return this;

}
//设置innerHTML
Base.prototype.html=function(str){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==0){//这里判断参数是否为0个，如果是0个则获取这个的innerHTML
return this.elements[i].innerHTML;//一旦这么设置就不能实现连缀了
}
this.elements[i].innerHTML=str;
}
return this;

}
//添加class属性
Base.prototype.addClass=function(className){
//先循环一下，看有多少个颜色
for(var i=0;i<this.elements.length;i++){
if(!hasClass){//查看传进来的属性原来是否存在
this.elements[i].className+= ' '+className;
}
}
return this;

}
//删除class属性
Base.prototype.removeClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(!this.elements[i].className.match(new RegExp(('//s|^')+className+'(//s|$'))){//查看传进来的属性原来是否存在
this.elements[i].className=this.elements[i].className.replace(new RegExp(('//s|^')+className+'(//s|$)'),' ');
}
}
return this;

}
//添加link或style的CSS规则
Base.prototype.addRule=function(num,selectorText,cssText,position){
var sheet=document.styleSheets[num];
if(typeof sheet.insertRule!='undefined'){//w3c
sheet.insertRule(selectorText+'{'+cssText+'}',position);
}else if(typeof sheet.addRule!='undefined'){//ie
sheet.addRule(selectorText,cssText,position);
}
return this;//返回this才能实行连缀功能
}
//删除link或style的CSS规则
Base.prototype.removeRule=function(num,index){
var sheet=document.styleSheets[num];
if(typeof sheet.deleteRule!='undefined'){//W3C
sheet.deleteRule(index);
}else if(typeof sheet.removeRule!='undefined'){//IE
sheet.removeRule(index);
}
return this;
}
//设置鼠标y移入移出的事件
Base.prototype.hover=function(over,out){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onmouseover=over;
this.elements[i].onmouseout=out;
}
return this;
}
//设置显示
Base.prototype.show=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='block';
}
return this;
}
//设置隐藏
Base.prototype.hide=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='none';
}
return this;
}
//设置点击事件
Base.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick=fn;
}
return this;
}
//设置物体居中
Base.prototype.center=function(width,height){
var top=(document.documentElement.clientHeight-250)/2;
var left=(document.documentElement.clientWidth-350)/2;
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.top=top+'px';
this.elements[i].style.left=left+'px';

}
return this;

}

//锁屏事件

//触法浏览器窗口事件
Base.prototype.resize=function(fn){
window.onresize=fn;
return this;
}
//锁屏事件
Base.prototype.lock=function(){
for(var i=0;i<this.elements.length;i++){

    this.elements[i].style.width=getInner().width+'px';
    this.elements[i].style.height=getInner().height+'px';
}
return this;

}
//撤销锁屏
Base.prototype.unlock=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='none';
}
return this;
}
//拖拽功能
Base.prototype.drag=function(){
var oDiv=document.getElementById('login');
oDiv.onmousedown=function(e){
preDef(e);
var e=e||window.event;
var diffX=e.clientX-oDiv.offsetLeft;
var diffY=e.clientY-oDiv.offsetTop;
document.onmousemove=function(e){
var e=e||window.event;
oDiv.style.left=e.clientX-diffX+'px';
oDiv.style.top=e.clientY-diffY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};

};

}
//阻止默认行为

index.js

// JavaScript Document
window.onload=function(){
$().getClass('memeber').hover(function(){
//$().getTagName('ul').show();

    $(this).css('background','url(image/arrow.png) no-repeat right center');
    $().getTagName('ul').show();
        //alert('show');
},function(){
    //$().getTagName('ul').hide();
    $(this).css('background','url(image/arrow2.png) no-repeat right center');
    $().getTagName('ul').hide();
        //alert('hide');
});
//登录框
/*
var top=(document.documentElement.clientHeight-250)/2;
var left=(document.documentElement.clientWidth-350)/2;
$('#login').css('top',top+'px').css('left',left+'px');
window.onresize=function(){
    var top=(document.documentElement.clientHeight-250)/2;
var left=(document.documentElement.clientWidth-350)/2;
   $('#login').css('top',top+'px').css('left',left+'px');
}
$('.login').click(function(){
    $('#login').css('display','block');
    $('#screen').lock;


});
$('.close').click(function(){
    $('#login').css('display','none');  
    $('#screen').unlock;
});
*/


$().getId('login').center(350,250).resize(function(){
    $().getId('login').center(350,250);
});

$().getClass('login').click(function(){
    $().getId('login').css('display','block');  
    $().getId('screen').lock();
    document.documentElement.style.overflow='hidden';
});

$().getClass('clo').click(function(){
    $().getId('login').css('display','none');   
    alert(12);
    //$().getId('screen').unlock();
});

//拖拽流程
//1.点击鼠标，选中目标
//2.对选中的目标进行移动
//3.松开鼠标
$().getId('login').drag();


//$().getId('screen').lock();

};
//在一些游览器中不支持第一种写法支持第二种写法。

tool.js

// JavaScript Document
//最近我总是遇见一个问题，我建立了一个base库，在实现这个问题的时候考效果总是显示不出来，甚至报错的问题
//这是因为存在着浏览器的问题接下来就谈谈夸浏览的问题

//跨浏览器获取视口的大小
function getInner(){
if(typeof window.innerWidth!='undefined'){
return{
width:window.innerWidth,
height:window.innerHeight
}
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight

}
}
}
//跨浏览器获取style
function getStyle(element,attr){
if(typeof window.getComputedStyle!='undefined'){//W3C
return window.getComputedStyle(element,null)[attr];
}else if(typeof element.currentStyle!='undefined'){//IE
return element.currentStyle[attr];
}

}
//跨浏览器判断是否有class
function hasClass(element,className){
return element.className.match(new RegExp(('//s|^')+className+'(//s|$)'));
}
//阻止默认行为
function preDef(event){
var e =getEvent(event);
if(typeof e.preventDefault!='undefined'){
e.preventDefault();
}else{
e.returnValue=false;
}
}

index.css

@charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
background:url(image/header_bg.png) repeat-x ;
}
#header{
width:900px;
height:30px;
margin:0 auto;
font-size:12px;

}
#header .logo{
width:100px;
height:30px;
float:left;

}
#header .logo img{
display:block;
}
#header .memeber{

width:80px;
height:30px;
float:right;
line-height:30px;
background:url(image/arrow2.png) no-repeat right center ;
cursor:pointer;

}
#header ul{
padding:0;
margin:0;
position:absolute;
top:30px;
left:1050px;
width:100px;
height:120px;
text-indent:20px;
display:none;

}
#header ul li{
list-style:none;
line-height:30px;
top:10px;
background:url(image/arrow3.gif) no-repeat left center;

}
#header ul li a{
text-decoration:none;
display:block;

}
#header ul li a:hover{
background:#0C3 url(image/arrow4.gif) no-repeat left center;
}
#header .login{
float:right;
width:35px;
height:30px;
line-height:30px;
cursor:pointer;
}
#screen{
position:absolute;
top:0;
left:0;
background:#000;
z-index:9998;
opacity:0.3;
filter:alpha(opacity=30);

}
#login{
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
display:none;
z-index:9999;
background:#FFF;
}
#login h2{
height:40px;
text-align:center;
letter-spacing:1px;
background:url(../image/login_header.png) repeat-x;
font-size:14px;
margin:0;
padding:0px;
line-height:40px;

}
#login img{
float:right;
position:relative;
top:10px;
right:5px;
cursor:pointer;
}
#login div.user,#login div.pass{
font-size:14px;
color:#666;
padding:10px 5px;
text-align:center;
}
#login input.text{
width:200px;
height:25px;
border:1px solid #ccc;

}
#login .button{
text-align:center;

}
#login input.submit{
width:107px;
height:30px;
background:url(../image/login_button.png) no-repeat;

}

参考这个，不需要第三方库

JavaScript高亮文本