利用jQuery實(shí)現(xiàn)網(wǎng)頁(yè)打開(kāi)即彈出一個(gè)浮動(dòng)層，層上面具備關(guān)閉層的按鈕

JavaScript 發(fā)布時(shí)間：2023/09/15 閱讀量：1779 來(lái)源：優(yōu)尚設(shè)計(jì)

這個(gè)網(wǎng)頁(yè)展示了一個(gè)彈出層功能。當(dāng)頁(yè)面加載時(shí)，會(huì)顯示一個(gè)半透明的遮罩層和一個(gè)居中的彈出層。彈出層包含一些示例內(nèi)容，并帶有一個(gè)關(guān)閉按鈕。用戶可以點(diǎn)擊關(guān)閉按鈕或遮罩層以關(guān)閉彈出層。這種彈出層效果可以用于展示重要信息、提示或其他需要引起用戶注意的內(nèi)容。通過(guò)簡(jiǎn)潔的設(shè)計(jì)和用戶友好的交互，提供了一種優(yōu)雅的方式來(lái)呈現(xiàn)額外的信息，同時(shí)不干擾用戶的瀏覽體驗(yàn)。

## 網(wǎng)頁(yè)彈出層
以下是一個(gè)使用jQuery（JQ）編寫的HTML代碼，用于在網(wǎng)頁(yè)加載時(shí)彈出一個(gè)層，并帶有一個(gè)關(guān)閉按鈕。

```html
<!DOCTYPE html>
<html>
<head>
  <title>彈出層示例</title>
  <style>
    /* 樣式用于遮罩層 */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
      display: none; /* 默認(rèn)隱藏 */
    }

/* 樣式用于彈出層 */
    #popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      width: 400px;
      display: none; /* 默認(rèn)隱藏 */
    }

/* 樣式用于關(guān)閉按鈕 */
    #close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>網(wǎng)頁(yè)彈出層示例</h1>
  
  <div   class="xbfpfrn"   id="overlay"></div> 
  
  <div   class="xbfpfrn"   id="popup">
    <h2>彈出層內(nèi)容</h2>
    <p>這是一個(gè)彈出層的示例。</p>
    <p>您可以在這里添加更多內(nèi)容。</p>
    <span id="close-btn">關(guān)閉</span> 
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 當(dāng)文檔加載完成時(shí)執(zhí)行以下代碼

// 顯示遮罩層和彈出層
      $("#overlay").fadeIn();
      $("#popup").fadeIn();

// 關(guān)閉按鈕點(diǎn)擊事件
      $("#close-btn").click(function() {
        $("#overlay").fadeOut();
        $("#popup").fadeOut();
      });
    });
  </script>
</body>
</html>
```

在上述代碼中，我們使用了CSS來(lái)定義遮罩層（`#overlay`）和彈出層（`#popup`）的樣式。彈出層中包含了一個(gè)關(guān)閉按鈕（`#close-btn`），當(dāng)點(diǎn)擊關(guān)閉按鈕時(shí)，遮罩層和彈出層會(huì)淡出消失。

在JavaScript部分，我們使用了jQuery庫(kù)來(lái)簡(jiǎn)化DOM操作。在`$(document).ready()`函數(shù)中，我們?cè)谖臋n加載完成后執(zhí)行代碼。我們使用`fadeIn()`函數(shù)來(lái)顯示遮罩層和彈出層，使用`fadeOut()`函數(shù)來(lái)隱藏它們。關(guān)閉按鈕的點(diǎn)擊事件會(huì)觸發(fā)遮罩層和彈出層的淡出效果。

你可以將上述代碼保存為一個(gè)HTML文件，然后在瀏覽器中打開(kāi)該文件，即可看到彈出層效果。

文章標(biāo)簽：

您可能感興趣的內(nèi)容