欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年04月27日 15:23:25   作者：David_黎  
這篇文章主要介紹了JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標(biāo)事件響應(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ù)學(xué)運算用法總結(jié)》

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

相關(guān)文章

  • JavaScript中遞歸實現(xiàn)的方法及其區(qū)別

    JavaScript中遞歸實現(xiàn)的方法及其區(qū)別

    遞歸函數(shù)是在通過名字調(diào)用自身的情況下構(gòu)成的。下面通過本文給大家分享JavaScript中遞歸實現(xiàn)的方法及其區(qū)別，感興趣的朋友一起看看吧
    2017-09-09
  • js 內(nèi)存釋放問題

    js 內(nèi)存釋放問題

    這里之所以使用setTimeout()，因為可以徹底回收當(dāng)前所有對象，防止變量之間的引用導(dǎo)致釋放失敗，可以當(dāng)作一個保障措施，按照道理來說，這里不會執(zhí)行了。
    2010-04-04
  • javascript全局變量封裝模塊實現(xiàn)代碼

    javascript全局變量封裝模塊實現(xiàn)代碼

    javascript全局變量封裝模塊的應(yīng)用，本文將詳細(xì)介紹，需要了解更多的朋友可以參考下
    2012-11-11
  • 使用 JavaScript 創(chuàng)建可維護的幻燈片效果代碼

    使用 JavaScript 創(chuàng)建可維護的幻燈片效果代碼

    顯然，效果很實用。對于這個效果，我們并不解釋如何去使用效果庫，而是講解如何創(chuàng)建類似的效果，并保持他的可用性，分離式（unobtrusive），可維護性（讓未來的維護者，在不需要修改你的腳本的情況下，修改圖片，外觀或文本標(biāo)簽）。
    2008-06-06
  • javascript正則表達(dá)式模糊匹配IP地址功能示例

    javascript正則表達(dá)式模糊匹配IP地址功能示例

    這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡單實例形式演示了JS模糊匹配IP地址的實現(xiàn)方法,涉及針對數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下
    2017-01-01
  • 原生js實現(xiàn)放大鏡組件

    原生js實現(xiàn)放大鏡組件

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)放大鏡組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-01-01
  • js時間查詢插件使用詳解

    js時間查詢插件使用詳解

    這篇文章主要為大家詳細(xì)介紹了js時間查詢插件的使用方法，結(jié)合bootstrap進行使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))

    JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))

    這篇文章主要介紹了JS實現(xiàn)斐波那契數(shù)列的五種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • Bootstrap的popover(彈出框)在append后彈不出(失效)

    Bootstrap的popover(彈出框)在append后彈不出(失效)

    這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • JS常用加密編碼與算法實例總結(jié)

    JS常用加密編碼與算法實例總結(jié)

    這篇文章主要介紹了JS常用加密編碼與算法,結(jié)合實例形式總結(jié)分析了javascript常見的utf8、base64編碼及md5、md4、SHA1等算法實現(xiàn)方法,需要的朋友可以參考下
    2016-12-12

最新評論