css弹框加遮罩6 |css3 右侧阴影

/** 遮罩 **/
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
/** 弹框 **/
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
padding: 20px;
z-index: 10000;
}
/** 清除默认样式 **/
.modal * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** 关闭按钮 **/
.modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}

以上是基础样式的实现。当需要弹出弹框时，可以通过添加.mask和.modal类来实现遮罩和弹框的呈现。同时，大家还可以在弹框中添加自己想要的内容，例如表单、文字、按钮等。

// JavaScript代码示例
// 打开弹框
document.querySelector('.btn-open-modal').addEventListener('click', function () {
document.querySelector('.mask').classList.add('visible');
document.querySelector('.modal').classList.add('visible');
});
// 关闭弹框
document.querySelector('.modal-close-btn').addEventListener('click', function () {
document.querySelector('.mask').classList.remove('visible');
document.querySelector('.modal').classList.remove('visible');
});

以上是使用JavaScript来实现打开和关闭弹框的代码。当用户点击打开弹框按钮时，大家通过添加.visible类来显示遮罩和弹框，而在关闭按钮中，大家则通过移除.visible类来隐藏遮罩和弹框。

综上所述，使用CSS实现弹框加遮罩是一个简单、实用的技术，它可以帮助大家实现更加友好、效果更佳的用户体验。大家只需要添加少量的HTML和CSS以及一些JavaScript代码，便可以在大家的页面上轻松使用这个功能。