快捷導(dǎo)航

JS簡單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法

更新時(shí)間：2017年04月27日 15:23:25 作者：David_黎

這篇文章主要介紹了JS簡單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS簡單實(shí)現(xiàn)點(diǎn)擊按鈕或文字顯示遮罩層的方法。分享給大家供大家參考，具體如下：

運(yùn)行效果圖如下：

完整代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>點(diǎn)擊文字彈出一個(gè)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'">請(qǐng)點(diǎn)這里</a></p>
    <div id="light" class="white_content">這是一個(gè)層窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">點(diǎn)這里關(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錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

JS
遮罩層

相關(guān)文章

JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的方式匯總
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的方式匯總的相關(guān)資料,需要的朋友可以參考下
2016-05-05
html的DOM中Event對(duì)象onabort事件用法實(shí)例
這篇文章主要介紹了html的DOM中Event對(duì)象onabort事件用法,實(shí)例分析了onabort事件的適用范圍與對(duì)應(yīng)的javascript使用技巧,需要的朋友可以參考下
2015-01-01
基于js 各種排序方法和sort方法的區(qū)別(詳解)
下面小編就為大家分享一篇基于js 各種排序方法和sort方法的區(qū)別(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
詳解JavaScript常量定義
本文主要對(duì)JavaScript常量定義進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
詳解JavaScript的BUG和錯(cuò)誤
本篇內(nèi)容給大家總結(jié)了JavaScript的BUG和錯(cuò)誤，如果大家對(duì)此知識(shí)點(diǎn)有興趣，可以跟著學(xué)習(xí)參考下。
2018-05-05
基于JavaScript制作霓虹燈文字代碼特效
這里使用JS實(shí)現(xiàn)網(wǎng)頁上的霓虹燈文字特效代碼特效，運(yùn)行效果看一下，你會(huì)看到文字的顏色像霓虹燈一樣，連續(xù)不停變化，五顏六色的，很炫的樣子，所以就叫做霓虹文字，也可以叫他文字變色效果，下面跟著小編一起學(xué)習(xí)JavaScript制作霓虹燈文字代碼特效，需要的朋友一起學(xué)習(xí)吧
2015-09-09
在iFrame子頁面里實(shí)現(xiàn)模態(tài)框的方法
今天小編就為大家分享一篇在iFrame子頁面里實(shí)現(xiàn)模態(tài)框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和
這篇文章主要介紹了TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和，MD5校驗(yàn)和可以用于驗(yàn)證網(wǎng)絡(luò)文件傳輸?shù)耐暾砸约胺乐刮募蝗舜鄹摹Ｏ挛奈覀兙鸵黄饋韺W(xué)習(xí)TypeScript與JavaScript項(xiàng)目里引入MD5校驗(yàn)和_MD5校驗(yàn),需要的朋友可以參考一下
2022-02-02
邏輯表達(dá)式中與或非的用法詳解
這篇文章主要介紹了邏輯表達(dá)式中與或非的用法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JS去掉字符串前后空格、阻止表單提交的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS去掉字符串前后空格、阻止表單提交的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-06-06