彈窗是網頁中常見的一種效果，現在隨著HTML5和CSS3的出現，制作彈窗的方法更加簡便和酷炫。下面我們就來學習一下如何用HTML5和CSS3做彈窗。

首先，我們需要通過HTML5搭建一個彈窗的基本框架，代碼如下：

<div id="popup">
<div class="popup-content">
<h2>這是一個彈窗標題</h2>
<p>這是彈窗的內容</p>
<button class="popup-close-btn">關閉</button>
</div>
</div>

通過這段代碼，我們就創建了一個id為popup的div作為彈窗的容器，其中包含了一個class為popup-content的div，它包含彈窗的標題、內容和關閉按鈕。

接下來，我們需要通過CSS3來美化彈窗的樣式，代碼如下：

#popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.popup-content h2 {
font-size: 24px;
margin-top: 0;
}
.popup-content p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.popup-close-btn {
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #333;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.popup-close-btn:hover {
background-color: #666;
}

通過這段代碼，我們定義了popup的樣式。首先，我們將它的position屬性設為fixed，使得它固定在頁面，然后設置背景色為黑色，透明度為0.5，通過display:none來隱藏它。接著，對popup-content進行絕對定位和居中，設置背景色和邊框圓角，并為它添加陰影效果。最后，對彈窗中的文字和關閉按鈕進行樣式設置。

完成了HTML5和CSS3代碼的編寫之后，我們需要通過JavaScript來實現彈窗的顯示和關閉。代碼如下：

var popup = document.getElementById("popup");
var closeBtn = document.querySelector(".popup-close-btn");
// 顯示彈窗
function showPopup() {
popup.style.display = "block";
}
// 關閉彈窗
function hidePopup() {
popup.style.display = "none";
}
// 點擊按鈕顯示彈窗
document.getElementById("open-btn").addEventListener("click", showPopup);
// 點擊關閉按鈕關閉彈窗
closeBtn.addEventListener("click", hidePopup);

通過這段代碼，我們獲取到了彈窗的元素和關閉按鈕的元素，并分別定義了showPopup()和hidePopup()函數來顯示和關閉彈窗。最后，我們為打開按鈕和關閉按鈕添加了鼠標點擊事件來觸發對應的函數。

通過以上的步驟，我們就完成了一個簡單的彈窗效果。使用HTML5和CSS3制作彈窗的方法簡單、靈活、美觀，是制作網頁特效的不錯選擇。