JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能示例
本文實(shí)例講述了JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能。分享給大家供大家參考,具體如下:
HTML部分:
<div id="div">點(diǎn)擊除開div的區(qū)域可以彈出彈窗</div> <div id="cover"></div> <div id="box">點(diǎn)擊除開div和彈窗的區(qū)域可以關(guān)閉彈窗</div>
CSS部分:
#div{ /*設(shè)置z-index屬性必須設(shè)置position:relative或absolute*/ position:relative; /*設(shè)置div位于遮罩的上方*/ z-index:2; width:300px; height:200px; border:1px solid grey; } #cover{ position:fixed; width:100%; height:100%; left:0; top:0; /*設(shè)置遮罩位于div的下方*/ z-index:1; } #box{ border:1px solid grey; /*當(dāng)彈窗顯示時(shí),屏幕滾動時(shí),彈窗始終保持位置固定在屏幕正中,不隨屏幕滾動而變化位置*/ position:fixed; width:400px; height:300px; left:50%; top:50%; /*配合left:50%和top:50%屬性使得浮出層的中心默認(rèn)在屏幕正中,margin-top為height的一半,margin-left為width的一半*/ margin:-150px 0 0 -200px; /*設(shè)置彈窗位于遮罩的上方*/ z-index:2; /*開始時(shí)隱藏彈窗*/ display:none; }
JavaScript部分:
document.getElementById("cover").onclick = function() { if (document.getElementById("box").style.display == "block") { document.getElementById("box").style.display = "none"; document.getElementById("cover").style.background = "white"; } else { document.getElementById("box").style.display = "block"; document.getElementById("cover").style.background = "#aaa"; } }
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:http://tools.jb51.net/code/WebCodeRun測試一下運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- js彈出框、對話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- js彈窗返回值詳解(window.open方式)
- JS實(shí)現(xiàn)自定義彈窗功能
- js彈窗代碼 可以指定彈出間隔
- JS彈窗 JS彈出DIV并使整個(gè)頁面背景變暗功能的實(shí)現(xiàn)代碼
- js退出彈窗代碼集合
- js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
- js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
- 關(guān)于vue.js彈窗組件的知識點(diǎn)總結(jié)
- javascript實(shí)現(xiàn)好看的可復(fù)用彈窗插件
相關(guān)文章
表格單元格交錯(cuò)著色實(shí)現(xiàn)思路及代碼
重點(diǎn)在于:以空間換時(shí)間,循環(huán)確定所著顏色;base確定起始顏色,i確定本次需要著色的單元格,感興趣的朋友可以參考下哈2013-04-04Javascript實(shí)現(xiàn)div層漸隱效果的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)div層漸隱效果的方法,涉及javascript操作頁面元素與樣式變化的相關(guān)技巧,需要的朋友可以參考下2015-05-05JavaScript 模擬類機(jī)制及私有變量的方法及思路
這篇文章介紹了JavaScript模擬類機(jī)制及私有變量的方法及思路,有需要的朋友可以參考一下2013-07-07Javascript異步表單提交,圖片上傳,兼容異步模擬ajax技術(shù)
使用Javascript異步表單提交,圖片上傳,兼容異步模擬ajax技術(shù),需要的朋友可以參考下。2010-05-05微信小程序定義和調(diào)用全局變量globalData的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序定義和調(diào)用全局變量globalData的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JS組件Bootstrap Table使用實(shí)例分享
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table分頁使用方法,具有一定的實(shí)用性,感興趣的小伙伴們可以參考一下2016-05-05