css模态框的制作 |css 框

/* HTML结构 */<div class="modal">
<div class="modal-content"></div>
</div>/* CSS样式 */.modal {
position: fixed; /* 定位方式 */
top: 0; /* 距离顶部的距离 */
left: 0; /* 距离左边的距离 */
width: 100%; /* 宽度 */
height: 100%; /* 高度 */
background-color: rgba(0,0,0,0.6); /* 半透明黑色背景 */
display: none; /* 初始状态隐藏 */
}
.modal-content {
position: absolute; /* 定位方式 */
width: 400px; /* 宽度 */
height: 300px; /* 高度 */
top: 50%; /* 距离顶部的距离 */
left: 50%; /* 距离左边的距离 */
margin-top: -150px; /* 一半的高度，用于居中 */
margin-left: -200px; /* 一半的宽度，用于居中 */
background-color: #fff; /* 模态框背景色 */
padding: 20px; /* 内边距 */
}

以上就是一个简单的CSS模态框的制作方式，具体效果可以在实践中尝试。需要注意的是，模态框内部的内容可以根据自己的需求进行更改，比如添加输入框、按钮等等。同时还可以在关闭按钮和模态框外部添加点击事件，使得用户点击即可关闭模态框。