<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="dialog-face"></div>
<div id="dialog">
<div>
<button id="all" onclick="openall()">
全屏
</button>
<button id="dialog-zoom" onclick="zoom()">
缩小
</button>
<button id="cls" onclick="closeDio()">
关闭
</button>
</div>
<button id="enter" onclick="ok()">
<div id="enterSpan">确定</div>
<div id="loading"></div>
</button>
</div>
<button id="btn" onclick="test()">
弹窗
</button>
<script>
let btn = document.getElementById('btn');
let dialog = document.getElementById('dialog');
let dialogFace = document.getElementById('dialog-face');
let cls = document.getElementById('cls');
let all = document.getElementById('all');
let dialogZoom = document.getElementById('dialog-zoom');
let enterSpan = document.getElementById('enterSpan');
let loading = document.getElementById('loading');
var smallOrBig = false;
function test (e) {
dialog.style.display = 'block';
dialogFace.style.display = 'block';
dialog.style.animation = 'dialogSlipToUP 500ms ease 1 forwards';
dialogZoom.style.display="none";
all.style.display="inline";
}
function closeDio() {
dialog.style.animation = (smallOrBig ? 'dialogSlipToAllDOWN' : 'dialogSlipToDOWN') +' 500ms ease 1 forwards';
dialogFace.style.display = 'none';
this.smallOrBig = false;
}
function openall() {
this.smallOrBig = true;
dialog.style.animation = 'dialogSlipToAll 500ms ease 1 forwards'
all.style.display="none"
dialogZoom.style.display="inline"
}
function zoom () {
this.smallOrBig = false;
all.style.display="inline"
dialogZoom.style.display="none"
dialog.style.animation = 'dialogSlipToZoom 500ms ease 1 forwards'
}
function ok () {
loading.style.display = 'block';
enter.style.background = '#fff';
enter.disabled = true;
let timer = setInterval(() => {
loading.style.display = 'none';
enter.style.background = 'rgb(62, 106, 146)';
timer = null;
enter.disabled = false;
}, 2000);
}
</script>
<style>
body {
margin:0;
padding: 0;
}
/* 遮罩层样式*/
#dialog-face {
position: fixed;
background: rgba(232, 243, 243, 0.911);
height: 100%;
width: 100%;
z-index: 1000;
top:0;
left: 0;
opacity: .7;
display: none;
}
/* 弹窗样式*/
#dialog {
width: 300px;
height: 200px;
display: none;
background: #fff;
position: fixed;
bottom:0;
right: 0;
margin: -100px 0 0 -150px;
transform: translate(100%, 100%);
z-index: 2000;
}
/* 定义动画*/
/*打开弹窗动画*/
@keyframes dialogSlipToUP {
0%{
opacity: 0.3;
bottom: 0;
right: 0;
}
100%{
transform: translate(50%,50%);
opacity:1;
bottom: 50%;
right: 50%;
width: 300px;
height: 200px;
display: block;
}
}
/* 关闭弹窗动画（小窗）*/
@keyframes dialogSlipToDOWN {
0%{
transform: translate(50%,50%);
opacity:1;
bottom: 50%;
right: 50%;
}
100% {
transform: translate(100%, 100%);
opacity: 0;
display: none;
}
}
/* 关闭弹窗动画（大窗）*/
@keyframes dialogSlipToAllDOWN {
0%{
width: 100%;
height: 100%;
bottom: 100%;
right: 100%;
opacity:1;
}
100% {
transform: translate(100%, 100%);
opacity: 0;
display: none;
}
}
/* 弹窗放大和缩小动画*/
@keyframes dialogSlipToAll {
0%{
transform: translate(50%,50%);
width: 300px;
height: 200px;
bottom: 50%;
right: 50%;
}
100% {
width: 100%;
height: 100%;
transform: translate(0%, 0%);
}
}
@keyframes dialogSlipToZoom {
0%{
width: 100%;
height: 100%;
transform: translate(0%, 0%);
}
100% {
transform: translate(50%,50%);
width: 300px;
height: 200px;
bottom: 50%;
right: 50%;
}
}
button {
padding: 3px 10px;
background: rgb(62, 106, 146);
color: #fff;
}
button:hover {
border-color: rgb(35, 236, 220);
}
/* loading动画代码*/
#loading {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -8px;
border: 2px solid rgb(166,166,166);
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
display: none;
z-index: 3000;
}
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#enter {
position:relative;
margin:145px 0 0 0;
}
</style>
</body>
</html>
