<button class="btn alert-box__open-btn">Click</button>
<div class="alert-box">
<div class="alert-box__content">
<p class="mb-20">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<button class="btn alert-box__close-btn">OK</button>
</div>
</div>
.alert-box {
position: fixed;
display: none;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
align-content: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
}
.alert-box.is-enter {
display: flex;
}
.alert-box.is-enter-active {
opacity: 0;
transition: opacity 0.3s;
}
.alert-box.is-enter-to {
opacity: 1;
}
.alert-box.is-leave-active {
opacity: 1;
transition: opacity 0.3s;
}
.alert-box.is-leave-to {
opacity: 0;
}
.alert-box__content {
width: 100%;
max-width: 360px;
margin: auto;
padding: 16px;
text-align: center;
background: #fff;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.alert-box {
position: fixed;
display: none;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
align-content: center;
justify-content: center;
background: $color_overlay;
&.is-enter {
display: flex;
}
&.is-enter-active {
opacity: 0;
transition: opacity $speed_fast;
}
&.is-enter-to {
opacity: 1;
}
&.is-leave-active {
opacity: 1;
transition: opacity $speed_fast;
}
&.is-leave-to {
opacity: 0;
}
&__content {
width: 100%;
max-width: 360px;
margin: auto;
padding: $space_lg;
text-align: center;
background: #fff;
box-shadow: $shadow_4;
}
}
(function() {
const alertBoxEl = document.querySelector('.alert-box');
if(!alertBoxEl) {return;}
const alertBoxOpenBtnEl = document.querySelector('.alert-box__open-btn');
const alertBoxCloseBtnEl = document.querySelector('.alert-box__close-btn');
transitionEnter(alertBoxOpenBtnEl, 'click', alertBoxEl);
transitionLeave(alertBoxCloseBtnEl, 'click', alertBoxEl);
// 要素が入ってくる際のCSS付与
function transitionEnter(el, event, target) {
el.addEventListener(event, () => {
target.classList.add('is-enter', 'is-enter-active');
setTimeout(() => {
target.classList.add('is-enter-to');
});
});
target.addEventListener('transitionend', (e) => {
if(e.target.classList.contains('is-enter-active')) {
target.classList.remove('is-enter-active', 'is-enter-to');
}
});
}
// 要素が出ていく際のCSS付与
function transitionLeave(el, event, target) {
el.addEventListener(event, () => {
target.classList.add('is-leave-active');
setTimeout(() => {
target.classList.add('is-leave-to');
});
});
target.addEventListener('transitionend', (e) => {
if(e.target.classList.contains('is-leave-active')) {
target.classList.remove('is-enter', 'is-leave-active', 'is-leave-to');
}
});
}
}());