在前面的實戰中，我們已經學會了如何監聽點擊、修改文字與動態生成清單。今天我們要來挑戰一個在所有網站（不管是電商、部落格還是企業官網）都無處不在的高頻互動——彈跳視窗（Modal）與展開/收合選單！

如果你曾經在 Figma 裡用 Variants（變體）或 Prototype 設定過「點擊按鈕後打開 Overlay（覆蓋圖層）」的互動，你會發現：用 JavaScript 實現這件事的邏輯簡直一模一樣！

核心觀念：如何用 CSS 搭配 JS 做出「顯示與隱藏」？

在前端世界裡，控制一個元素要不要出現，最經典的招式有兩種：

1. display: none 與 display: block：直接讓元素消失或出現。
2. 切換 Class（類別名稱）：這也是最推薦的做法！我們在 CSS 裡先寫好一個 .active 樣式（控制透明度或顯示狀態），然後透過 JS 去「幫元素穿脫這件衣服」。
   在 JavaScript 裡，有一個超級好用的神兵利器叫做 classList.toggle()，它的意思是：「如果元素身上有這個 Class 就幫我拔掉；如果沒有就幫我穿上去！」就像開關燈一樣直覺。

實戰演練：製作一個點擊就彈出的 Modal 視窗

HTML 結構（背景遮罩、彈跳視窗與觸發按鈕）：

<!-- 觸發按鈕 -->
<div class="card">
    <button id="open-modal-btn">開啟詳細資訊</button>
</div>

<!-- Modal 彈跳視窗本體（預設隱藏） -->
<div id="my-modal" class="modal-overlay">
    <div class="modal-box">
        <h2>這是彈跳視窗標題</h2>
        <p>嗨！我是從畫面正中間彈出來的詳細內容。</p>
        <button id="close-modal-btn">關閉視窗</button>
    </div>
</div>

CSS 樣式（預設藏起來）：

/* 遮罩背景：預設隱藏 */
.modal-overlay {
    display: none; /* 先讓它消失 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑背景 */
    justify-content: center;
    align-items: center;
}

/* 當加上這個 class 時就顯示出來 */
.modal-overlay.show {
    display: flex; /* 讓內部的視窗置中 */
}

.modal-box {
    background: white;
    padding: 30px;
    border-radius: 12px;
    width: 300px;
}

JavaScript 互動邏輯（開關控制）：

// 1. 抓取重要元件
const openBtn = document.querySelector('#open-modal-btn');
const closeBtn = document.querySelector('#close-modal-btn');
const modalOverlay = document.querySelector('#my-modal');

// 2. 點擊「開啟」按鈕時，加上 .show 類別讓視窗彈出來
openBtn.addEventListener('click', function() {
    modalOverlay.classList.add('show');
});

// 3. 點擊「關閉」按鈕時，移除 .show 類別讓視窗收起來
closeBtn.addEventListener('click', function() {
    modalOverlay.classList.remove('show');
});

// 4. 進階小技巧：點擊半透明背景也能關閉視窗！
modalOverlay.addEventListener('click', function(e) {
    // 如果點擊的目標剛好是最外層的遮罩背景本身
    if (e.target === modalOverlay) {
        modalOverlay.classList.remove('show');
    }
});

今日小結

今天我們學會了如何透過 classList.add、remove 與 toggle，完美控制網頁元件的顯示與隱藏，做出了質感滿分的 Modal 彈跳視窗。

學會了狀態切換後，明天我們要來進一步接觸前端開發中非常厲害的概念——API 與非同步資料串接（如何從外部把別人的資料抓回來顯示在畫面上）！