<style>
html, body {
padding: 0px;
margin: 0px;
background: #444;
font-family: 'Ubuntu', sans-serif;
color: #FFF;
width: 100%;
height: 100%;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/teddy-kelley-70636.jpg");
background-position: center;
background-size: cover;
}
.clearfix *:after {
content: '';
clear: both;
display: table;
}
* {
box-sizing: border-box;
}
.modal {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s;
-webkit-animation: 1s hide infinite;
animation: 1s hide infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.modal:target, .modal.force {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
-webkit-animation: none;
animation: none;
}
.modal:target .view, .modal.force .view {
transition: all 1s eas-in-out;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.modal .background {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background: #000;
opacity: 0.5;
}
.modal .view-container {
padding: 20px;
}
.modal .view {
transition: all 1s ease-in-out;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: relative;
margin: 50px auto;
max-width: 600px;
border: 2px solid #FFF;
border-radius: 2px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.5);
}
.modal .view .content {
position: relative;
min-height: 100px;
padding: 10px;
}
.modal .view .header {
padding: 16px 10px;
border-radius: 3px 3px 0px 0px;
border-bottom: 2px solid #FFF;
background: rgba(0, 0, 0, 0.75);
}
.modal .view .header * {
margin: 0px;
}
.modal .view .header a.close {
position: absolute;
right: 10px;
top: 7px;
text-decoration: none;
color: #FFF;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.modal .view .header a.close:before {
content: '+';
font-size: 28px;
}
.modal .view .header a.close:hover {
opacity: 0.5;
}
.button {
margin: 10px;
padding: 10px 20px;
border: 2px solid #FFF;
border-radius: 3px;
background: transparent;
color: white;
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-block;
}
.button.primary {
background: rgba(255, 255, 255, 0.2);
}
.button:hover {
background: rgba(255, 255, 255, 0.5);
}
.pull-right {
float: right;
margin-left: 0px;
}
@-webkit-keyframes hide {
0%, 100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes hide {
0%, 100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
</style>
<a class="button" href="#modal">Open</a>
<div class="modal clearfix" id="modal">
<div class="background"></div>
<div class="view-container">
<div class="view">
<div class="header">
<p>Hi! You opened up this modal!</p><a class="close" href="#"></a>
</div>
<div class="content">
<p>Please hit save or cancel. Nothing will happen!</p>
</div>
<div class="footer"><a class="button pull-right" href="#">Cancel</a><a class="button primary pull-right" href="#">Save</a></div>
</div>
</div>
</div>
<script>
var modal = document.querySelector('#modal');
setTimeout(function(){
modal.classList.add('force');
}, 2000);
setTimeout(function(){
modal.classList.remove('force');
}, 3000);
</script>
결과보기