半透明遮罩層效果基本上都是使用插件實現的，下面為大家分享下使用原生js實現半透明遮罩效果，感興趣的朋友可以參考下哈，希望對你熟悉原生js有所幫助
<div > <h4><span>現在注冊</span><span >關閉</span></h4> <p> <label> 用戶名</label> <input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> </p> <p> <label> 密 碼</label> <input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> </p> <p> <input type="submit" value="注冊" class="sub" /> <input type="reset" value="重置" class="sub" /> </p> </div> <div ></div><!-- 遮罩層div--> <script type="text/javascript"> var myAlert = document.getElementById("alert"); var myMask=document.getElementById('mask'); var reg = document.getElementById("content").getElementsByTagName("a")[0]; var mClose = document.getElementById("close"); reg.onclick = function() { myMask.style.display="block"; myAlert.style.display = "block"; myAlert.style.position = "absolute"; myAlert.style.top = "50%"; myAlert.style.left = "50%"; myAlert.style.marginTop = "-75px"; myAlert.style.marginLeft = "-150px"; document.body.style.overflow = "hidden"; } mClose.onclick = function() { myAlert.style.display = "none"; myMask.style.display = "none"; } </script> </body> </html> 全屏幕遮蓋
<!DOCTYPE html><style>#mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElement.scrollTop); background:rgba(0,0,0,0.5); background:transparent/9; filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#80000000,endColorStr=#80000000 ); display:none;}#mask_td {text-align:center;}</style><img src="http://web-tinker.com/images/TheMagicConch.jpg" width="100" id="img" /><table id="mask"><tr><td id="mask_td"></td></tr></table><script>//判斷瀏覽器var isIE=navigator.userAgent.match(/MSIE (/d)/i);isIE=isIE?isIE[1]:isIE;//聲明變量var img,mask;//獲取元素img=document.getElementById("img");mask=document.getElementById("mask");mask.td=document.getElementById("mask_td");//計算mask的大小mask.setSize=function(){ //獲取文檔可見區域寬度并設置到mask上 var de=document.documentElement; mask.style.width=de.clientWidth+"px" mask.style.height=de.clientHeight+"px";};//添加show方法mask.show=function(){ //隱藏頁面的滾動條 document[ isIE<9?"documentElement":"body" ].style.overflow="hidden"; //計算mask的大小 mask.setSize(); //顯示 mask.style.display=isIE==6?"block":"table";};//添加hide方法mask.hide=function(){ //顯示頁面滾動條 document[ isIE<9?"documentElement":"body" ].style.overflow=""; //清空里面的內容 mask.td.innerHTML=""; //隱藏 mask.style.display="none";};//添加append方法mask.append=function(e){ //在mask的TD里面添加內容哦你 mask.td.appendChild(e);};//點擊mask關閉mask.onclick=function(e){ //判斷事件來源，如果是空白區域被點擊了就關閉mask e=e||event; (e.target||e.srcElement)==mask.td&&mask.hide();};//窗體大小改變時也改變mask的大小window.onresize=function(){ mask.setSize();};//點擊圖片的事件img.onclick=function(){ //創建一個圖片對象 var o=new Image; //設置圖片的地址 o.src=img.src; //在mask內添加內容 mask.append(o); //顯示mask mask.show();};</script>新聞熱點
疑難解答
