1. 創建 HTML 結構

```

2. 編寫 CSS 樣式

```css/ 彈窗樣式 /.popup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 999;visibility: hidden;opacity: 0;transition: visibility 0.5s ease-in-out, opacity 0.5s ease-in-out;}/ 彈窗內容樣式 /.popup-content {background-color: fff;padding: 20px;border-radius: 5px;}/ 關閉按鈕樣式 /.close-button {position: absolute;top: 10px;right: 10px;cursor: pointer;}```

3. 添加 JavaScript 代碼

```javascript// 獲取彈出框元素const popup = document.getElementById('popup');// 獲取關閉按鈕元素const closeButton = document.querySelector('.close-button');// 添加點擊事件偵聽器到關閉按鈕closeButton.addEventListener('click', () => {// 關閉彈出框popup.style.visibility = 'hidden';popup.style.opacity = '0';});// 顯示彈出框const showPopup = () => {popup.style.visibility = 'visible';popup.style.opacity = '1';};```

4. 響應式設計

要使彈出框響應式，需要使用媒體查詢來調整不同屏幕尺寸下的彈出框大小和位置。```css@media screen and (max-width: 600px) {.popup-content {width: 90%;max-width: 400px;}}```

5. 使用

在需要顯示彈出框時調用 `showPopup()` 函數即可。```javascriptshowPopup();```

結論

通過遵循本指南，您可以使用代碼創建動態且響應式的彈出框。這些彈出框可用于顯示更多信息、收集用戶輸入或執行其他任務。

---

---

相關標簽： 一步步指導的成語、 使用代碼創建動態且響應式的彈窗、 一步步指導、

上一篇：針對不同設備優化彈窗代碼，實現跨平臺兼容性

下一篇：深入淺出解析彈窗代碼，掌握網站交互的精髓深