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

發(fā)布時(shí)間：2020-10-01 10:33:08 來源：腳本之家閱讀：424 作者：David_黎欄目：web開發(fā)

本文實(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ì)有所幫助。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽