<div modal iframe>是一種常見的網頁開發技術，它結合了HTML的<div>元素、模態框和<iframe>元素的特性。通過使用<div modal iframe>，開發者可以在網頁中創建模態框，其中包含一個可嵌入其他網頁的<iframe>元素。這種技術的應用場景廣泛，可以用于實現彈出式登錄框、展示其他網頁的預覽等功能。

案例1：實現彈出式登錄框

使用<div modal iframe>可以方便地實現一個彈出式登錄框，用戶可以在彈出框中輸入用戶名和密碼進行登錄。

<!-- HTML -->
<div class="modal" id="loginModal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<iframe src="login.html" frameborder="0"></iframe>
</div>
</div>
<br>
<!-- CSS -->
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
<br>
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
<br>
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
<br>
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
<br>
<!-- JavaScript -->
<script>
function openModal() {
document.getElementById("loginModal").style.display = "block";
}
<br>
function closeModal() {
document.getElementById("loginModal").style.display = "none";
}
</script>

在上述代碼中，我們創建了一個<div>元素作為模態框的容器，利用CSS設置其在頁面中覆蓋全屏且半透明。通過JavaScript中的openModal()和closeModal()函數，可以控制模態框的顯示和隱藏。

案例2：展示其他網頁的預覽

除了登錄框，<div modal iframe>還可以用于展示其他網頁的預覽效果。用戶可以通過點擊縮略圖或按鈕來觸發模態框，并在模態框中加載目標網頁。

<!-- HTML -->
<div class="modal" id="previewModal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<iframe src="preview.html" frameborder="0"></iframe>
</div>
</div>
<br>
<img src="thumbnail.png" alt="Preview" onclick="openModal()">
<br>
<!-- CSS、JavaScript與案例1相同 -->

在這個案例中，我們使用一個縮略圖來代表目標網頁，用戶可以點擊縮略圖來打開模態框進行預覽。通過設置<iframe>元素的src屬性，可以加載指定的網頁內容。

參考案例：百度搜索預覽

百度搜索的預覽功能就是使用了<div modal iframe>技術，用戶在搜索結果列表中點擊預覽按鈕后，會彈出一個模態框來展示目標網頁的預覽效果。

：<div modal iframe>是一種非常有用的網頁開發技術，它可以幫助我們實現彈出式登錄框、展示其他網頁的預覽等功能。通過結合<div>、模態框和<iframe>元素，我們可以靈活地創建各種交互效果，提升用戶體驗。