本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)
2. CSS樣式

純CSS模態(tài)框的添加方法

純CSS模態(tài)框是一種通過CSS樣式來創(chuàng)建模態(tài)框的方法，無需JavaScript或其他腳本語(yǔ)言，下面將介紹如何使用純CSS來添加模態(tài)框。

HTML結(jié)構(gòu)

我們需要一個(gè)HTML元素來作為模態(tài)框的容器，可以使用div元素來創(chuàng)建。

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>這是一段模態(tài)框的內(nèi)容</p>
  </div>
</div>

CSS樣式

我們需要使用CSS來定義模態(tài)框的樣式，以下是一個(gè)簡(jiǎn)單的模態(tài)框樣式示例：

.modal {
  display: none; /* 模態(tài)框默認(rèn)不顯示 */
  position: fixed; /* 模態(tài)框固定在屏幕上 */
  z-index: 1; /* 模態(tài)框的堆疊順序 */
  left: 0; /* 模態(tài)框的左邊界位置 */
  top: 0; /* 模態(tài)框的上邊界位置 */
  width: 100%; /* 模態(tài)框的寬度 */
  height: 100%; /* 模態(tài)框的高度 */
  overflow: auto; /* 模態(tài)框的內(nèi)容可滾動(dòng) */
  background-color: rgb(0,0,0); /* 模態(tài)框的背景顏色 */
  background-color: rgba(0,0,0,0.9); /* 在IE8及更早版本的瀏覽器中使用rgba */
}
.modal-content {
  background-color: #fefefe; /* 模態(tài)框內(nèi)容的背景顏色 */
  margin: 15px; /* 模態(tài)框內(nèi)容的外邊距 */
  padding: 20px; /* 模態(tài)框內(nèi)容的內(nèi)邊距 */
  border: 1px solid #888; /* 模態(tài)框內(nèi)容的邊框樣式 */
  width: 80%; /* 模態(tài)框內(nèi)容的寬度 */
}
.close {
  position: absolute; /* 關(guān)閉按鈕的位置 */
  top: 15px; /* 關(guān)閉按鈕距離模態(tài)框頂部的距離 */
  right: 35px; /* 關(guān)閉按鈕距離模態(tài)框右邊的距離 */
  color: #f00; /* 關(guān)閉按鈕的顏色 */
  font-size: 40px; /* 關(guān)閉按鈕的字體大小 */
  font-weight: bold; /* 關(guān)閉按鈕的字體加粗 */
  transition: 0.3s; /* 關(guān)閉按鈕的過渡效果 */
}