現在，越來越多的網站和應用程序都采用模態框來展示內容和交互。模態框是一種用戶界面元素，以彈出形式出現在前面，阻止用戶對界面上的其余部分進行任何操作，直到完成對彈出窗口的操作。在這篇文章中，我們將通過純CSS編寫一個基礎的模態框。

首先，我們需要一個按鈕來觸發模態框的出現。我們可以使用一個簡單的HTML button元素，如下所示：

<button>打開模態框</button>

下一步是創建模態框本身。我們將使用HTML的div元素作為模態框的容器。我們可以在代碼中添加一個id來引用這個div。

<div id="myModal">
<h2>這是一個模態框</h2>
<p>模態框中的內容可以在這里添加。</p>
</div>

現在，我們需要一些CSS代碼來控制模態框的顯示和隱藏。

#myModal {
display: none;
position: fixed; /* 固定在視口中央 */
z-index: 1; /* 放在所有其他元素的前面 */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* 允許用戶滾動模態框中的內容 */
background-color: rgba(0,0,0,0.4); /* 黑色半透明背景 */
}
#myModal.visible {
display: block;
}

我們定義了一個隱藏的模態框容器。當用戶單擊按鈕時，我們將添加一個CSS類名`visible`到容器中。該類名將使模態框變為可見狀態，即顯示在視口中央，同時使用半透明背景暗示其余部分不可以被操作。

現在，我們需要JavaScript代碼來處理按鈕單擊事件，并將CSS類名`visible`添加到模態框容器中。以下是一個基本的JavaScript代碼示例：

// 獲取按鈕元素
const button = document.querySelector('button');
// 獲取模態框容器元素
const modal = document.querySelector('#myModal');
// 給按鈕添加點擊事件處理器
button.addEventListener('click', function() {
// 將visible類名添加到模態框容器中
modal.classList.add('visible');
});

這樣，當用戶單擊按鈕時，我們將添加一個CSS類名到模態框中，使其變為可見狀態。這就是我們的模態框的基本實現。