HTML/JQuery彈窗是網(wǎng)站開發(fā)中常用的一種交互方式，通過彈出一個窗口來展示內(nèi)容或進(jìn)行操作，提高了用戶體驗。本文將介紹HTML/JQuery彈窗的基本使用方法。

1. HTML彈窗：

<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>這是一個彈窗！</p>
</div>
</div>
<button id="myBtn">打開彈窗</button>
<script>
// 獲取彈窗元素
var modal = document.getElementById("myModal");
// 獲取打開彈窗的按鈕
var btn = document.getElementById("myBtn");
// 獲取關(guān)閉按鈕
var span = document.getElementsByClassName("close")[0];
// 點擊按鈕打開彈窗
btn.onclick = function() {
modal.style.display = "block";
}
// 點擊關(guān)閉按鈕關(guān)閉彈窗
span.onclick = function() {
modal.style.display = "none";
}
// 點擊彈窗外部關(guān)閉彈窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

2. JQuery彈窗：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>這是一個彈窗！</p>
</div>
</div>
<button id="myBtn">打開彈窗</button>
<script>
// 點擊按鈕打開彈窗
$("#myBtn").click(function() {
$("#myModal").css("display", "block");
});
// 點擊關(guān)閉按鈕關(guān)閉彈窗
$(".close").click(function() {
$("#myModal").css("display", "none");
});
// 點擊彈窗外部關(guān)閉彈窗
$(window).click(function(event) {
if (event.target == $("#myModal")[0]) {
$("#myModal").css("display", "none");
}
});
</script>

除了以上基本使用方法之外，我們還可以通過CSS樣式和JS代碼來自定義彈窗的外觀和功能，實現(xiàn)更加豐富的交互體驗。