JavaScript 在網頁中央彈出一個 div 元素

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. 什麼是彈出視窗
  2. 樣式化彈出視窗
  3. 在 JavaScript 中開啟和關閉彈出視窗
  4. 使用 jQuery 開啟和關閉彈出視窗
JavaScript 在網頁中央彈出一個 div 元素

本教程將解決如何在網頁中央開啟一個彈出視窗。首先,我們有以下查詢要在本文中解決:

  • 什麼是彈出視窗
  • 設計一個彈出視窗
  • 在 JavaScript 中開啟和關閉彈出視窗
  • 使用 jQuery 開啟和關閉彈出視窗

什麼是彈出視窗

彈出視窗是在底層內容之上的視窗上開啟的小視窗或小框。

使用彈出視窗的主要用例是關注某些資訊而不是整個內容,提示使用者確認。或者,彈出視窗也稱為模態框。

樣式化彈出視窗

彈出視窗的樣式很重要,唯一的原因是你希望它顯示在主要內容之上,或者至少需要給人一種它在主要內容之上的錯覺。我們將通過以下示例瞭解如何執行此操作:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        height: 100%;
      }
      .overlay {
        position: absolute;
        display: none;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 2;
      }

      .popup {
        position: absolute;
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
        text-align: center;
        background: white;
      }
     
      .popup h3 {
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        color: black;
      }
      .CloseIcon{
        cursor: pointer;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="overlay" id="overlay">
      <div class="popup">
        <div onclick="CloseModal()" class="CloseIcon">&#10006;</div>
        <h3>Popup Content</h3>
      </div>
    </div>
    <button onclick="OpenModal()">Show PopUp</button>
  </body>
</html>

在這個簡單的示例中,我們建立了一個顯示彈出視窗的按鈕。但最重要的是,我們有一個 overlay 元素,它會在所有內容之上以淺黑色顯示,從而使使用者難以看到該內容。

然後我們建立了一個 popup 元素並將其設定為位於 overlay 元素和網頁中央的上方。在這樣做的過程中,我們設法隱藏了主要內容。

當一個彈出視窗在螢幕中間開啟時,它會引起使用者的注意,因為這是使用者唯一能清楚看到的東西。但是 overlay 元素被設定為 none,所以它現在不顯示。

問題是,我們如何切換彈出視窗?我們可以通過使用 JavaScript 或 jQuery 來做到這一點。讓我們在下面詳細討論兩者。

在 JavaScript 中開啟和關閉彈出視窗

我們可以使用 JavaScript 來切換彈出樣式屬性;我們可以通過訪問 DOM 元素及其 style 屬性並將 display 型別從 none 更改為 block 來做到這一點,這將使彈出視窗出現。

同樣,一旦使用者單擊關閉圖示,我們就可以改回 none。讓我們用一個例子來說明這一點。

function OpenModal() {
  let element = document.getElementById('overlay')
  element.style.display = 'block'
}
function CloseModal() {
  let element = document.getElementById('overlay')
  element.style.display = 'none'
}

使用 jQuery 開啟和關閉彈出視窗

或者,我們可以用 jQuery 重複同樣的事情。讓我們看一下原始碼和所需的更改。

function OpenModal() {
	 $('#overlay').show();
}
function CloseModal() {
	 $('#overlay').hide();
}

在這個例子中,我們使用了 showhide jQuery 方法。不是將 display 的屬性從 none 更改為 blockshow 刪除 element 上的 display 屬性,類似地,hidedisplay 屬性設定為 none .

注意
show 僅適用於 display:none 或 jQuery 隱藏的專案;它不適用於 CSS 的 visibility 屬性。

此外,使用 jQuery 時,請務必在標頭中新增 jQuery CDN(或安裝 jQuery 包)。