CSS中建立模態窗口是一種常見的技術，可以在網頁中實現彈出窗口，提高網頁的交互性和用戶體驗。下面我們來介紹一下建立模態窗口的方法。
首先，我們需要使用HTML創建模態窗口的結構。比較常見的結構是使用一個
標簽作為模態窗口的容器，將彈出窗口的內容放在
中，而背景部分則可以使用另一個
進行阻擋：
<div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>這里是模態窗口的內容</p> </div> </div> <div id="myModal-bg" class="modal-bg"></div>
然后，我們需要使用CSS對模態窗口進行樣式定義。常見的樣式屬性有position、z-index、display、opacity等：
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.modal-bg {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
display: none;
}最后，我們需要使用JavaScript實現模態窗口的打開和關閉功能。常見的方法是通過設置模態窗口的display屬性實現彈出和彈回的效果：
// 獲取模態窗口和背景部分
var modal = document.getElementById("myModal");
var modalBg = document.getElementById("myModal-bg");
// 獲取關閉按鈕
var closeBtn = document.getElementsByClassName("close")[0];
// 打開模態窗口
function openModal() {
modal.style.display = "block";
modalBg.style.display = "block";
}
// 關閉模態窗口
function closeModal() {
modal.style.display = "none";
modalBg.style.display = "none";
}
// 點擊背景部分也可以關閉模態窗口
modalBg.onclick = function() {
closeModal();
};
// 點擊關閉按鈕關閉模態窗口
closeBtn.onclick = function() {
closeModal();
};下一篇css中平移的屬性