Left-to-Right Sliding Modal

Test modal that slides into view that uses transition for animation and calc() for positioning.

by Travis Almand

HTML

<button type='button' id='show'>show</button>

<p>Not that I suggest such animations, but this is just to show how one could animate the modal and the cover if one wished.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit ultrices lorem, vitae volutpat mauris. Ut dictum turpis ligula. Nam ut quam laoreet, accumsan mi accumsan, imperdiet leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus porttitor turpis erat, quis semper elit dignissim eu. Vivamus sagittis auctor elementum. Praesent facilisis elit et eleifend pretium. Pellentesque tristique eu libero eu porttitor. Praesent vitae suscipit purus. Integer ultrices eros euismod turpis mollis dictum.</p>
<p>Donec interdum scelerisque eros, non volutpat purus pellentesque vitae. Nulla tincidunt sit amet libero adipiscing sollicitudin. Etiam a leo ac velit tristique lobortis. In sit amet sodales augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec placerat augue eu ultrices rutrum. In lacinia sapien nec eros feugiat viverra at vitae sem. Donec eu semper sapien. Morbi rhoncus iaculis urna, sit amet congue felis iaculis eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis risus lectus, interdum quis lorem non, dignissim vehicula massa. Nullam sed pretium magna, ut aliquam odio. Vestibulum et auctor diam. Duis tincidunt, lacus at mollis ultrices, felis libero scelerisque quam, sed accumsan turpis ante et libero. Etiam vestibulum diam turpis, in pulvinar lectus pretium id. Sed auctor, velit id sodales tristique, purus elit ornare metus, nec rhoncus odio ligula sit amet tortor.</p>

<div id='modal'>
    <button type='button' id='close'>close</button>
</div>

<div id='modalBack'></div>

CSS

html, body {
    height: 100%;
    overflow-x: hidden;
    width: 100%;
}

#modal {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: gainsboro;
    border: 2px solid black;
    display: none;
    height: 200px;
    left: calc(50% - 200px);
    position: absolute;
    top: calc(50% - 100px);
    width: 400px;
    z-index: 10;
}

#modalBack {
    animation-duration: .5s;
    animation-fill-mode: forwards;
    background: black;
    display: none;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: 5;
}

#close {
    position: absolute;
    right: -10px;
    top: -5px;
}

@keyframes modalSlideIn {
    from { left: -500px; opacity: 0; }
    to { calc(50% - 200px); opacity: 1; }
}
@keyframes modalSlideOut {
    from { left: calc(50% - 200px); opacity: 1; }
    to { left: calc(100% + 200px); opacity: 0; }
}
@keyframes modalBackFadeIn {
    from { opacity: 0; height: 0; width: 0; left: 50%; top: 50%; }
    to { opacity: .75; height: 100%; width: 100%; left: 0; top: 0; }
}
@keyframes modalBackFadeOut {
    from { opacity: 1; height: 100%; width: 100%; left: 0; top: 0; }
    to { opacity: 0; height: 0; width: 0; left: 50%; top: 50%; }
}

JavaScript

var modal = document.getElementById('modal');
var modalBack = document.getElementById('modalBack');
var show = document.getElementById('show');
var close = document.getElementById('close');

show.addEventListener('click', function () {
    modal.style.display = 'block';
    modal.style.animationName = 'modalSlideIn';
    modalBack.style.display = 'block';
    modalBack.style.animationName = 'modalBackFadeIn';
});

close.addEventListener('click', function () {
    modal.style.animationName = 'modalSlideOut';
    modalBack.style.animationName = 'modalBackFadeOut';
});

modalBack.addEventListener('click', function () {
    modal.style.animationName = 'modalSlideOut';
    modalBack.style.animationName = 'modalBackFadeOut';
});