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

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'">請點(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é)》

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

    js時(shí)間查詢插件使用詳解

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

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

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

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

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

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

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

最新評論