<div>是HTML中的一個標簽元素，用于定義文檔中的一個區域，可以用于對網頁進行布局和排版。而<iframe>是HTML中的一個內聯框架元素，用于在文檔中嵌入另一個HTML文檔。在本篇文章中，我們將介紹如何使用<div>和<iframe>結合使用，實現模態（Modal）效果。
模態（Modal）指的是在一個頁面中打開另一個頁面，并在打開的頁面上顯示一個彈出窗口，同時遮罩（overlay）住背后的頁面，使得背后的頁面不可點擊。常見的應用場景包括登錄框、注冊框、圖片瀏覽等。
下面是幾個代碼案例，用于詳細解釋如何使用<div>和<iframe>實現模態效果。
案例一：簡單的登錄框模態

<div id="login-modal" style="display: none;">
<iframe src="login.html"></iframe>
</div>
<br>
<button onclick="showModal()">打開登錄框</button>
<br>
<script>
function showModal() {
document.getElementById("login-modal").style.display = "block";
}
</script>

在這個案例中，<div>元素代表了登錄框的容器，設置了初始的顯示狀態為"none"，即隱藏狀態。當點擊按鈕時，通過JavaScript的showModal()函數，將<div>的顯示狀態修改為"block"，從而顯示出登錄框。登錄框的內容由<iframe>元素嵌入進來，通過設置其src屬性指向登錄頁面的URL（login.html）。
案例二：帶遮罩的模態框

<div id="overlay" style="display: none;"></div>
<br>
<div id="image-modal" style="display: none;">
<iframe src="image-viewer.html"></iframe>
</div>
<br>
<button onclick="showModal()">打開圖片瀏覽</button>
<br>
<script>
function showModal() {
document.getElementById("overlay").style.display = "block";
document.getElementById("image-modal").style.display = "block";
}
</script>

在這個案例中，我們給<div>元素添加了一個id為"overlay"的元素，用于實現遮罩效果。初始狀態下，遮罩和圖片瀏覽框都是隱藏的。當點擊按鈕時，通過JavaScript的showModal()函數，先將遮罩元素的顯示狀態修改為"block"，然后將圖片瀏覽框的顯示狀態修改為"block"，這樣就實現了帶有遮罩的模態框效果。
起來，結合使用<div>和<iframe>可以實現各種模態效果，只需要通過JavaScript控制<div>的顯示狀態即可。可以根據具體的需求，自定義模態框的內容和樣式，實現豐富多樣的交互效果。希望本文對您理解<div>、<iframe>和模態效果的實現有所幫助。