Как правильно реализовать модальное окно?

Question

[smailenemy]

Подскажите возможно ли и если да, то как реализовать такое модальное окно без подключения лишних плагинов? На чистом js с минимумом кода?

Оно кстати не прокручивает контент под собой.

Answer 1

[Денис Инешин]

Конечно же возможно, но особо не нужно. Библиотеки вроде jQuery сильно облегчают работу с DOM и событиями. Не потребуется писать кучу велосипедов, и много тестировать, чтобы сделать все как надо.

Если же вам очень хочется, то возьмите за референс этот сайт: youmightnotneedjquery.com

Answer 2

[Денис]

Если без плагинов, прочих библиотек и на чистом JS+CSS, то вот такой вариант

<button id="open">Открыть модальное окно</button>
<div class="modal-layer">
    <div class="modal-content">
        <!-- контент -->
    </div>
</div>

.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;
}

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);

JS подключить в конце страницы или обернуть в DOM-Reday конструкцию.