本文實例講述了JS實現的添加彈出層并完成鎖屏操作。分享給大家供大家參考，具體如下：
上圖：
代碼：
<html><head> <title>彈出層</title> <style type="text/css"> *{ padding:0px; margin:0px; } .up{ width:500px; height: 400px; border:1px solid silver; position: absolute; display: none; z-index: 9999; background:#fff;/* top:50%; left: 50%;*//* margin-left: -250px; margin-top: -200px;*/ } .up h2{ background-color: #f2f2f2; text-align: center; } .con span{ width:20px; height:30px; text-align: center; line-height: 30px; background-color:red; cursor: pointer; } .mask{ width:3000px; height: 3000px; background:#000; opacity: 0.3; position: absolute; top:0; left: 0; z-index: 9998; display:none; } </style></head><body> <div class="con"> <span id="open">打開彈出層</span> </div> <div class="up" id="up"> <h2>彈出層效果</h2> <span id="close">關閉</span> </div> <img src="a.jpg"></body><script type="text/javascript">//兩種方式實現div居中：1：用css方式：top：50%，left：50%； margin-let:-divwidth/2 margin-top:divheight/2; 2:用js實現：獲取窗口的高寬，top=（屏幕高-div高）/2,為了隨時的監聽瀏覽器的改變，需要用到瀏覽器事件 window.onload=function(){ function $(id){ return document.getElementById(id); } //將div的位置封裝在一個函數內部，直接調用 function myDiv(){ var mTop=(document.documentElement.clientHeight-500)/2; var mleft=(document.documentElement.clientWidth-400)/2; $("up").style.top=mTop+"px"; $("up").style.left=mleft+"px"; } myDiv(); $("open").onclick=function(){ $("up").style.display="block"; mask.style.display="block"; } $("close").onclick=function(){ $("up").style.display="none"; mask.style.display="none" } //創建一個DIV var mask=document.createElement("div"); // //給這個DIV一個id和class屬性 // mask.id="mask"; mask.className="mask"; mask.style.width=document.documentElement.clientWidth; mask.style.height=document.documentElement.clientHeight; //將這個DIV放置到body里面--》一般是：父節點.appendChild(子節點) //這里注意的是absolute，要設置top和left； document.body.appendChild(mask); //屏幕改變大小的時候，div不會自動的改變，需要添加窗口改變事件 window.onresize=function(){ myDiv(); mask.style.width=document.documentElement.clientWidth; mask.style.height=document.documentElement.clientHeight; } }</script></html>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
