Animate Modal In and Out Without Using Display

An example of having a modal that animates in and out without using display none and does not block interaction with content.

by Travis Almand

HTML

<button class='show'>show</button><button class='show2'>show2</button>

<p>When showing or hiding a modal typically a display: none is involved because otherwise the modal will cover the content below it. Even though not seen, the modal will block interaction with the content.</p>
<p>If the modal is to pop into and out existence then this is no big deal, but gets trickier if a fade and/or movement is desired. Because using display: none will often cause the animation to not be seen as it pops out of view immediately.</p>
<p>We get around this having the modal translate into and out of position. When we apply the "show" class we only transition the opacity so that that transform is immediate. But when we remove the "show" class it falls back to the default transition; which is to transition the opacity immediately but have a transform transition as well that is delayed by the same time used for opacity.</p>
<p>In this way, once the fade out is completed the transform transitions instantly because we have a transition time of zero. Once the transition has moved the modal out of the way it no longer blocks interaction with the content.</p>

<div id='modalback'><div id='modal'>click to close</div></div>
<div id='popover'>click to close</div>

CSS

button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
}
#modalback {
    background-color: rgba(0, 0, 0, 0.75);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    transition: opacity 1s, transform 0s 1s;
    width: 100%;
}
#modalback.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1s;
}
#modal {
    background-color: green;
    border-radius: 10px;
    bottom: 0;
    color: white;
    height: 300px;
    left: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 75%;
}

#popover {
    background-color: gainsboro;
    border: 1px solid black;
    bottom: 0;
    height: 200px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    transform: translate3d(-125%, 0, 0);
    top: 0;
    width: 90%;
}
.popin {
    animation: popin 0.5s forwards;
}
.popout {
    animation: popout 0.5s;
}

@keyframes popin {
    from {
        opacity: 0;
        transform: translate3d(0, -25%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes popout {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(-25%, 0, 0);
    }
}

JavaScript

$('#modalback').on('click', function () {
    $(this).removeClass();
});

$('.show').on('click', function () {
    $('#modalback').toggleClass('show');
});

$('.show2').on('click', function () {
    $('#popover').removeClass().addClass('popin');
});

$('#popover').on('click', function () {
    $(this).removeClass().addClass('popout');
});