css点击模态框 |css表格 布局

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
border: none;
padding: 50px;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9998;
}
.modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #333;
cursor: pointer;
}
.modal-body {
margin-bottom: 20px;
}

以上CSS代码定义了模态框的样式，包括模态框本身、模态框的遮罩层、关闭按钮和模态框内容容器。接下来就可以用JS来控制模态框的显示和隐藏。

const openModal = () =>{
document.querySelector('.modal-overlay').style.display = 'block';
document.querySelector('.modal').style.display = 'block';
};
const closeModal = () =>{
document.querySelector('.modal-overlay').style.display = 'none';
document.querySelector('.modal').style.display = 'none';
};
document.querySelector('#open-modal-btn').addEventListener('click', openModal);
document.querySelector('.modal-overlay').addEventListener('click', closeModal);
document.querySelector('.modal-close-btn').addEventListener('click', closeModal);

以上JS代码定义了打开模态框、关闭模态框和绑定点击事件等功能。具体实现可以根据具体的项目需求进行调整和改进。