css实现弹窗多选上屏 |css背景颜色位置移动

/* CSS代码 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.popup .title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.popup .options {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.popup .option {
width: calc(33.33% - 10px);
margin-bottom: 10px;
padding: 5px 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.popup .option.selected {
background-color: #007bff;
color: #fff;
}
/* HTML代码 */
请选择
选项1
选项2
选项3
选项4
选项5
选项6
// JS代码
var options = document.querySelectorAll('.popup .option');
for (var i = 0; i< options.length; i++) {
options[i].addEventListener('click', function() {
this.classList.toggle('selected');
});
}

在上面的代码中，大家首先定义了一个弹窗容器(.popup)，并设置了它的位置、样式、阴影等属性。然后在弹窗中添加一个标题(.title)和选项容器(.options)，并将选项用一个DIV元素(.option)包裹起来，并设置它们的样式和点击事件。当用户点击某个选项时，大家使用JavaScript为这个选项添加或移除一个.selected类名，表示该选项被选中或取消选中状态。

使用CSS实现弹窗多选上屏可以使页面更加美观和易于操作，同时还可以降低开发的成本和难度。因此，Web开发人员可以在实际应用中根据需要选择是否使用该技术。