JSFiddle - React, Tailwind, and code Playground

HTML

<button id="open">Открыть модальное окно</button>
<div class="modal-layer">
    <div class="modal-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laborum, totam accusamus, esse vitae maxime quibusdam nesciunt illum, deleniti in omnis fugit harum, magni vero temporibus eius saepe hic dolore.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laborum, totam accusamus, esse vitae maxime quibusdam nesciunt illum, deleniti in omnis fugit harum, magni vero temporibus eius saepe hic dolore.</p>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nesciunt quod explicabo minima nihil saepe quis tempore, blanditiis, officia placeat aut laborum corporis omnis dicta dolores deleniti ullam, unde ut magnam nemo. Culpa aspernatur vero asperiores impedit consequuntur, harum recusandae magni repudiandae debitis. A est, quasi sequi, repellendus amet ducimus neque consequatur voluptate eaque nostrum aliquam dolore minima dolorem veritatis suscipit. Accusamus expedita id ipsam repudiandae adipisci voluptatem quam blanditiis corporis neque aperiam totam consequuntur amet perspiciatis, velit ad, praesentium quia non ut quasi nulla at quaerat, iure. Suscipit facere aliquid, perferendis excepturi sit molestiae, repudiandae libero totam corporis quia vitae possimus iste veritatis, asperiores dicta consequatur? Accusamus unde, magni architecto repellat cupiditate harum quidem earum officiis, at corrupti dignissimos beatae, ipsa aliquam, accusantium laudantium quis! Incidunt soluta veritatis atque iusto perspiciatis eaque id rem minima ducimus. Animi accusamus nihil voluptas, molestias repellendus facere. Harum, sint, mollitia. Odio, enim. Necessitatibus aspernatur aliquam odio impedit enim doloremque, fugiat, voluptate, quis harum ipsum nisi perferendis ullam exercitationem consequatur unde? Laudantium odio aspernatur nisi autem totam, ipsam eaque ullam hic adipisci facere ea, suscipit distinctio...

CSS

.modal-layer {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.modal-layer::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -0.36em;
}

.modal-content {
    display: inline-block;
    width: 75%;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5);
    background: #fff;
    vertical-align: middle;
}

.modal-layer.open {
    visibility: visible;
    opacity: 1;
}


/* -- */

#open {
    padding: 3px 7px;
}

JavaScript

var modal = document.querySelector('.modal-layer');
document.getElementById('open').addEventListener('click', function() {
    modal.classList.add('open');
    document.body.style.overflow = 'hidden';
}, false);
modal.addEventListener('click', function(e) {
    if (e.target === this) {
        this.classList.remove('open');
        document.body.style.overflow = 'auto';
    }
}, false);