隨著Web應用程式在日益普及，與使用者之間進行互動的方式也在不斷變化。彈出框是一種可靠的方法，用於提示使用者需要注意的事項，詢問使用者是否執行操作或顯示成功的提示訊息。然而，當彈出層不再需要時，最好把它從頁面上移除，以避免對使用者的視覺混淆。
在本文中，我們將介紹如何使用jQuery來刪除顯示的彈出框。 jQuery是個廣泛使用的JavaScript函式庫，已成為開發人員的首選工具之一。
步驟1：新增HTML和CSS
首先，我們需要在頁面中新增HTML和CSS，以建立彈出框。在本例中，我們將建立一個簡單的div，它將作為我們的彈出框。
HTML程式碼如下所示：
<div class="popup">
<h2>提示</h2>
<p>欢迎来到我的网站！</p>
<button class="close">关闭</button>
</div>
登入後複製
我們還需要為這個div添加CSS樣式，以使其在頁面中居中顯示，並將它看起來像一個彈出層。
CSS程式碼如下所示：
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup h2 {
font-size: 18px;
margin-top: 0;
}
.popup p {
margin-bottom: 0;
}
.close {
background-color: #ccc;
border: none;
color: #fff;
padding: 5px 10px;
cursor: pointer;
float: right;
margin-top: 10px;
}登入後複製
此CSS程式碼將在頁面中建立一個基本彈出框，並將其放置在頁面中央。它還為彈出框添加了一個關閉按鈕，以便在不需要彈出框時關閉它。
步驟2：顯示彈出框
現在我們已經建立了彈出框，下一步是在需要時顯示出來。為此，我們將使用jQuery的show（）方法。
jQuery程式碼如下所示：
$(document).ready(function() {
$('.show-popup').click(function() {
$('.popup').show();
});
});登入後複製
這段程式碼將在頁面上找到名為.show-popup的元素（例如按鈕），當使用者點擊這個元素時，彈出框將使用show（）方法顯示出來。
步驟3：關閉彈出框
當使用者完成與彈出框相關的操作後，最好將其從頁面上移除。為此，我們將使用jQuery的remove（）方法。
jQuery程式碼如下所示：
$(document).ready(function() {
$('.close').click(function() {
$('.popup').remove();
});
});登入後複製
這段程式碼將在頁面上找到名為.close的元素（關閉按鈕），當使用者點擊這個元素時，彈出框將使用remove（）方法從頁面移除。
步驟4：完整的程式碼
最終，我們要將所有的程式碼片段組合在一起，使其創建一個工作的彈出框。
完整的程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery删除显示的弹框</title>
<style>
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup h2 {
font-size: 18px;
margin-top: 0;
}
.popup p {
margin-bottom: 0;
}
.close {
background-color: #ccc;
border: none;
color: #fff;
padding: 5px 10px;
cursor: pointer;
float: right;
margin-top: 10px;
}
</style>
</head>
<body>
<button class="show-popup">显示弹框</button>
<div class="popup">
<h2>提示</h2>
<p>欢迎来到我的网站！</p>
<button class="close">关闭</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('.show-popup').click(function() {
$('.popup').show();
});
$('.close').click(function() {
$('.popup').remove();
});
});
</script>
</body>
</html>登入後複製
現在，當使用者點擊「顯示彈框」按鈕時，彈出框將使用show（）方法顯示。當使用者點擊關閉按鈕時，彈出框將使用remove（）方法從頁面移除。
總結
在本文中，我們已經學習如何使用jQuery來建立和刪除顯示的彈出框。彈出框是一種很好的使用者互動方式，但如果使用不當，可能會降低使用者體驗。最好只在必要時顯示彈出框，並使用jQuery來刪除它們，以便將頁面保持乾淨和易於使用。
以上是jquery刪除顯示的彈框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
