模態彈出框在網頁設計中有著廣泛的應用，它可以方便用戶在當前頁面的基礎上進行一些特殊操作。在這篇文章中，我們將介紹如何使用手寫的CSS代碼來實現一個簡單的模態彈出框。

首先，我們需要在HTML文檔中添加一個按鈕元素，用于觸發彈出框：

<button id="openModal">打開彈出框</button>

接下來，我們需要使用CSS來定義彈出框的外觀和位置。代碼如下：

.modal {
position: fixed; /* 定位方式 */
top: 0; /* 距離上方的距離 */
left: 0; /* 距離左側的距離 */
width: 100%; /* 寬度 */
height: 100%; /* 高度 */
background-color: rgba(0, 0, 0, 0.7); /* 背景色和透明度 */
display: none; /* 默認情況下不顯示 */
}
.modal-content {
position: absolute; /* 定位方式 */
top: 50%; /* 距離上方的距離 */
left: 50%; /* 距離左側的距離 */
transform: translate(-50%, -50%); /* 居中顯示 */
width: 400px; /* 寬度 */
height: 200px; /* 高度 */
background-color: #fff; /* 背景色 */
padding: 20px; /* 內邊距 */
border-radius: 5px; /* 圓角 */
}

現在，我們需要編寫JavaScript代碼來實現打開和關閉彈出框的功能。代碼如下：

// 獲取元素
var modal = document.querySelector('.modal');
var btnOpen = document.querySelector('#openModal');
var btnClose = document.querySelector('.modal-close');
// 打開彈出框
btnOpen.addEventListener('click', function() {
modal.style.display = 'block';
});
// 關閉彈出框
btnClose.addEventListener('click', function() {
modal.style.display = 'none';
});

最后，我們需要在彈出框中添加一些內容，例如標題和關閉按鈕。代碼如下：

這是一個彈出框
這是彈出框中的內容
關閉

到此為止，我們就完成了一個簡單的模態彈出框的實現。通過上面的代碼示例，我們可以根據自己的需要進行定制和擴展，實現更加個性化的彈出框效果。