本文實(shí)例講述了JS實(shí)現(xiàn)的添加彈出層并完成鎖屏操作。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),電白企業(yè)網(wǎng)站建設(shè),電白品牌網(wǎng)站建設(shè),網(wǎng)站定制,電白網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,電白網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
上圖:
代碼:
<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 h3{ 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"> <h3>彈出層效果</h3> <span id="close">關(guān)閉</span> </div> <img src="a.jpg"> </body> <script type="text/javascript"> //兩種方式實(shí)現(xiàn)div居中:1:用css方式:top:50%,left:50%; margin-let:-divwidth/2 margin-top:divheight/2; 2:用js實(shí)現(xiàn):獲取窗口的高寬,top=(屏幕高-div高)/2,為了隨時(shí)的監(jiān)聽瀏覽器的改變,需要用到瀏覽器事件 window.onload=function(){ function $(id){ return document.getElementById(id); } //將div的位置封裝在一個(gè)函數(shù)內(nèi)部,直接調(diào)用 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" } //創(chuàng)建一個(gè)DIV var mask=document.createElement("div"); // //給這個(gè)DIV一個(gè)id和class屬性 // mask.id="mask"; mask.className="mask"; mask.style.width=document.documentElement.clientWidth; mask.style.height=document.documentElement.clientHeight; //將這個(gè)DIV放置到body里面--》一般是:父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn)) //這里注意的是absolute,要設(shè)置top和left; document.body.appendChild(mask); //屏幕改變大小的時(shí)候,div不會(huì)自動(dòng)的改變,需要添加窗口改變事件 window.onresize=function(){ myDiv(); mask.style.width=document.documentElement.clientWidth; mask.style.height=document.documentElement.clientHeight; } } </script> </html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
分享文章:JS實(shí)現(xiàn)的添加彈出層并完成鎖屏操作示例
文章源于:http://bm7419.com/article0/jcicio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、商城網(wǎng)站、建站公司、Google、App設(shè)計(jì)、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)