1.图层背景
在盒子:
position: relative;
overflow: hidden;
background: rgba(191, 195, 199, 0.2);
元素上写:
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(10px)
遮罩层
.overlay {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,.8);
}
让里面的内容居中
如果内容有固定的宽、高,可以选择CSS和绝对定位,否则就要使用JavaScript.
.overlay content {
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
width: 400px;
height: 400px;
}
遮罩被点击时要6秒自动关闭
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.3);
display:none;
z-index:1000;
}
</style>
</head>
<body>
<button>按钮</button>
<div id="overlay ">遮罩</div>
<script>
var btn=document.getElementsByTagName('button')[0];
btn.addEventListener('click',function(){ //addEventListener() 方法用于向指定元素添加事件句柄。
var overlay =document.getElementById('overlay ');
overlay .style.display='block';
setTimeout(function(){
overlay .style.display='none';
},6000)
})
//判断有没有登录
// 声明周期函数
beforeCreate() {
// 判断是否有token
let token = window.sessionStorage.getItem("token");
if (token) {
// 登录成功
} else {
// 没有token 没有登录
this.$message.error("请先登录");
// 去登录页 编程式导航
this.$router.push("login");
}
},
methods: {
logout() {
window.sessionStorage.removeItem("token");
// 编程式导航
this.$router.push("login");
}
}
显示已隐藏 遮罩层
//需求1:
$('#j_btnAddData').click(function () {
$('#j_mask').show();//遮罩层
$('#j_formAdd').show();//添加数据面板
});
//需求2:
$('#j_hideFormAdd').click(function () {
$('#j_mask').hide();//遮罩层
$('#j_formAdd').hide();//添加数据面板
});
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
display: none;
}
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
