HTML彈窗是網頁設計中常用的功能之一，可以用于展示重要信息、輸入框、提示等等。以下是一個示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML彈窗示例</title>
<style>
/* 彈窗樣式 */
.popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none; /* 默認隱藏 */
z-index: 9999;
}
.popup-content {
background-color: white;
width: 400px;
height: 300px;
margin: auto;
margin-top: 50px;
text-align: center;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* 按鈕樣式 */
.btn {
display: inline-block;
background-color: #0a74c9;
color: white;
padding: 10px 20px;
margin-top: 20px;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="popup">
<div class="popup-content">
<h2>這是一個HTML彈窗</h2>
<p>彈窗內容在這里，可以放置文字、圖片等等</p>
<input type="text" placeholder="輸入框示例">
<a href="#" class="btn">關閉彈窗</a>
</div>
</div>
<button onclick="document.querySelector('.popup').style.display='block'">打開彈窗</button>
</body>
</html>代碼解釋：
<div class="popup"> 和 <div class="popup-content"> 分別定義了彈窗的大小、位置、樣式等等。display屬性默認為none，即隱藏狀態。
<button onclick="document.querySelector('.popup').style.display='block'">打開彈窗</button> 點擊按鈕可以通過Javascript代碼改變彈窗的display屬性為block，即顯示狀態。
<a href="#" class="btn">關閉彈窗</a> 定義了一個關閉彈窗的按鈕，點擊后可以通過Javascript代碼將彈窗的display屬性設置為none，即隱藏狀態。
通過上述示例代碼，你可以自己嘗試修改彈窗的樣式、內容、交互等等，達到自己所需的效果。
下一篇c json對象用法