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">✖</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();
}
在這個例子中，我們使用了 show 和 hide jQuery 方法。不是將 display 的屬性從 none 更改為 block，show 刪除 element 上的 display 屬性，類似地，hide 將 display 屬性設定為 none .
show 僅適用於 display:none 或 jQuery 隱藏的專案；它不適用於 CSS 的 visibility 屬性。此外，使用 jQuery 時，請務必在標頭中新增 jQuery CDN（或安裝 jQuery 包）。