如何用CSS实现一个模态窗口？

要使用CSS创建一个简单的模态窗口（通常称为弹出窗口），你可以结合HTML和少量的JavaScript来控制窗口的显示和隐藏。下面是一个完整的示例，展示如何实现一个基本的模态窗口：

HTML 结构
模态窗口的HTML结构通常包括一个背景遮罩和一个包含内容的容器。

<!-- 模态窗口 -->
<div id="myModal" class="modal">
    <!-- 模态内容 -->
    <div class="modal-content">
        <span class="close-button">×</span>
        <h2>模态窗口标题</h2>
        <p>这是一个模态窗口的内容。</p>
    </div>
</div>

CSS 样式
接下来，定义模态窗口的样式，包括窗口的位置、动画和背景遮罩等。

/* 背景遮罩 */
.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.4); /* 半透明黑色背景 */
}

/* 模态内容容器 */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 垂直居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 内容宽度 */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation-name: modalopen;
    animation-duration: 0.4s; /* 动画时长 */
}

/* 关闭按钮 */
.close-button {
    color: #aaa;
    float: right; /* 右上角 */
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 打开动画 */
@keyframes modalopen {
    from {opacity: 0}
    to {opacity: 1}
}

JavaScript 逻辑
使用JavaScript控制模态窗口的显示和隐藏：

// 获取模态窗口和关闭按钮
var modal = document.getElementById("myModal");
var closeButton = document.getElementsByClassName("close-button")[0];

// 点击关闭按钮时隐藏模态窗口
closeButton.onclick = function() {
    modal.style.display = "none";
}

// 点击模态窗口外的区域也可以关闭模态窗口
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// 打开模态窗口的函数，可以绑定到某个按钮或其他元素的事件
function openModal() {
    modal.style.display = "block";
}

如何使用
当需要显示模态窗口时，可以调用 openModal() 函数。如果你有一个按钮用来打开模态窗口，可以这样设置：

<button onclick="openModal()">显示模态窗口</button>

这个例子展示了如何创建一个简单的模态窗口，包括动画效果和基本的交互功能。你可以根据具体需求调整样式和行为，例如改变动画、调整布局或添加更多内容和功能。