モーダルボックスは、重要なメッセージを表示するために使用され、ユーザーインターフェイスをブロックするために使用されます。モーダルボックスは破壊的であり、過度に使用するとユーザーエクスペリエンスを簡単に損なう可能性があるため、慎重に使用する必要があります。ただし、場合によっては、それらは適切なビューであり、アニメーションを追加することで、それらを生き生きとさせることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
will-change: transform, opacity;
background: rgba(0,0,0,0.4);
transform: scale(1.15);
transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.modal.visible {
pointer-events: auto;
opacity: 1;
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.content {
position: fixed;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
width: 200px;
height: 200px;
background: #fff;
border-radius: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div class="modal" id="modal">
<div class="content">
<button id="close">关闭</button>
</div>
</div>
<button id="open">打开</button>
<script>
let open = document.getElementById('open')
let close = document.getElementById('close')
let modal = document.getElementById('modal')
open.onclick = control
close.onclick = control
function control() {
modal.classList.toggle('visible')
}
</script>
</body>
</html>
