使用原生CSS transition 完成的模态框
作者:
JohnYuCN | 来源:发表于
2021-12-06 11:24 被阅读0次<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS原生动画完成的模态框</title>
<style>
body{
margin: 0;
}
#mate{
position:absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
background-color: gray;
display: none;
opacity: 0;
transition: all 3s;
}
#modal{
position:absolute;
width: 500px;
height: 500px;
background-color:tomato;
left: calc(50% - 250px);
top: -600px;
border-radius: 20px;
box-shadow: 20px 20px 80px gray;
transition: top 500ms;
}
h1{
transition: all 1000ms;
opacity: 1;
}
</style>
</head>
<body>
<h1>CSS原生动画完成的模态框</h1>
<button class="open">打开模态框</button>
<div id="mate"></div>
<div id="modal">
<button class="close">关闭</button>
</div>
<script>
function $(el){
return document.querySelector(el)
}
$('button.open').onclick=function(){
$('#mate').style.display='block'
$('#mate').style.opacity=0.8
$('#modal').style.top="200px"
}
$('button.close').onclick=function(){
$('#mate').style.display='none'
$('#mate').style.opacity=0
$('#modal').style.top="-600px"
}
</script>
</body>
</html>
本文标题：使用原生CSS transition 完成的模态框
本文链接：https://www.haomeiwen.com/subject/sxhwxrtx.html
网友评论