JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法
更新時間：2017年04月27日 15:23:25 作者：David_黎
這篇文章主要介紹了JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法。分享給大家供大家參考，具體如下：
運行效果圖如下：
完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>點擊文字彈出一個DIV層窗口代碼</title>
<meta charset="urf-8"/>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>示例彈出層：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">請點這里</a></p>
<div id="light" class="white_content">這是一個層窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">點這里關(guān)閉本窗口</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript窗口操作與技巧匯總》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript中遞歸實現(xiàn)的方法及其區(qū)別
遞歸函數(shù)是在通過名字調(diào)用自身的情況下構(gòu)成的。下面通過本文給大家分享JavaScript中遞歸實現(xiàn)的方法及其區(qū)別，感興趣的朋友一起看看吧2017-09-09
這里之所以使用setTimeout()，因為可以徹底回收當前所有對象，防止變量之間的引用導致釋放失敗，可以當作一個保障措施，按照道理來說，這里不會執(zhí)行了。2010-04-04
javascript全局變量封裝模塊的應(yīng)用，本文將詳細介紹，需要了解更多的朋友可以參考下2012-11-11
使用 JavaScript 創(chuàng)建可維護的幻燈片效果代碼
顯然，效果很實用。對于這個效果，我們并不解釋如何去使用效果庫，而是講解如何創(chuàng)建類似的效果，并保持他的可用性，分離式（unobtrusive），可維護性（讓未來的維護者，在不需要修改你的腳本的情況下，修改圖片，外觀或文本標簽）。2008-06-06
這篇文章主要介紹了javascript正則表達式模糊匹配IP地址功能,結(jié)合簡單實例形式演示了JS模糊匹配IP地址的實現(xiàn)方法,涉及針對數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)放大鏡組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細介紹了js時間查詢插件的使用方法，結(jié)合bootstrap進行使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))
這篇文章主要介紹了JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
Bootstrap的popover(彈出框)在append后彈不出(失效)
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JS常用加密編碼與算法,結(jié)合實例形式總結(jié)分析了javascript常見的utf8、base64編碼及md5、md4、SHA1等算法實現(xiàn)方法,需要的朋友可以參考下2016-12-12