开发者社区> 问答> 正文

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

        想要用Javascript实现一个弹出的全网页遮罩层,并且这个遮罩层可以指定高亮位置,比如高亮被遮住的某一个<div>元素。
        求教前端大神指点一二,给个例子什么的~~拜谢!!

展开
收起
小旋风柴进 2016-06-01 10:53:51 3330 0
1 条回答
写回答
取消 提交回答
  • <script type="text/javascript"> 
    var myAlert = document.getElementById("alert"); 
    var reg = document.getElementById("content").getElementsByTagName("a")[0]; 
    reg.onclick = function() { 
    myAlert.style.background = "#e2ecf5"; 
    myAlert.style.zIndex = "501"; 
    myAlert.style.position = "absolute"; 
    
    var signSpan = document.getElementById("signSpanId"); 
    myAlert.style.top = signSpan.offsetTop; 
    myAlert.style.left = signSpan.offsetLeft; 
    
    mybg = document.createElement("div"); 
    mybg.setAttribute("id", "mybg"); 
    mybg.style.background = "#000"; 
    mybg.style.width = "100%"; 
    mybg.style.height = "100%"; 
    mybg.style.position = "absolute"; 
    mybg.style.top = "0"; 
    mybg.style.left = "0"; 
    mybg.style.zIndex = "500"; 
    mybg.style.opacity = "0.3"; 
    mybg.style.filter = "Alpha(opacity=30)"; 
    document.body.appendChild(mybg); 
    
    //document.body.style.overflow = "hidden"; 
    } 
    </script> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    </head> 
    <body> 
    
    <table border="1" align="center" width="700px"> 
    <tr> 
    <td width="300px" height="200px" style="font-size:28px; font-weight:bold"> 
    <div id="content"> 
    <a href="#"> 
    启动遮罩层 
    </a> 
    </div> 
    </td> 
    <td style="vertical-align:top"> 
    <div id="signSpanId" style="position:absolute;"></div> 
    <div id="alert" align="top"> 
    <h4> 
    <span> 
    这是高亮显示区域 
    </span> 
    </h4> 
    <p> 
    <label> 
    用户名 
    </label> 
    <input type="text" /> 
    </p> 
    <p> 
    <label> 
    密 码 
    </label> 
    <input type="password" /> 
    </p> 
    <p> 
    <input type="submit" value="注册" /> 
    <input type="reset" value="重置" /> 
    </p> 
    </div> 
    
    </td> 
    <td width="100px"> 
    <div>我是第三列</div> 
    </td> 
    </tr> 
    </table> 
    </body> 
    </html> 
    2019-07-17 19:22:53
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载