В данной статье описано, как создать одно или несколько модальных окон на сайте при помощи HTML, CSS и JavaScript (например, для договора оферты, политики обработки персональных данных и согласия на обработку персональных данных).

В конец html файла перед закрывающими тэгами </body></html> вставляем следующий код:

<div id="offer" class="modal">
    <div class="close"></div>
    <div class="modal-body">
        Текст договора оферты
    </div>
</div>

<div id="privacy" class="modal">
    <div class="close"></div>
    <div class="modal-body">
        Текст политики обработки персональных данных
    </div>
</div>

<div id="consent" class="modal">
    <div class="close"></div>
    <div class="modal-body">
        Текст согласия на обработку персональных данных
    </div>
</div>

<script>
    let scrollbar = 0
    document.addEventListener('DOMContentLoaded', function() {
        scrollbar = window.innerWidth - document.body.clientWidth + 'px'
    })

    document.querySelectorAll('.offer, .privacy, .consent').forEach((e) => {
        e.addEventListener('click', function () {
            let modalDiv = document.getElementById(e.classList[0])
            document.querySelectorAll('.modal').forEach((modal) => { modal.classList.remove('show') })
            if ( modalDiv.scrollHeight <= modalDiv.offsetHeight ) modalDiv.style.alignItems = 'center'
            modalDiv.classList.add('show')
            document.body.style.overflow = 'hidden'
            document.body.style.paddingRight = scrollbar
        }, false)
    })

    document.addEventListener('click', function(e) {
        if ( (e.target.classList.contains('modal') && e.target.classList.contains('show') ) || e.target.closest('.close')) {
            document.querySelectorAll('.modal').forEach( function(e) { e.classList.remove('show') })
            document.body.style.overflow = 'visible'
            document.body.style.paddingRight = 0
        }
    }, false)
</script>

Теперь в файл стилей css помещаем следующий код:

.modal {
    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 30px 0;
    background: rgba(39, 34, 32, .9);
    overflow: hidden;
    transition: opacity 250ms;
}
.modal.show {
    opacity: 1;
    pointer-events: auto;
    overflow: auto;
}
.modal .close {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.5) url('/images/cross.webp') no-repeat center center;
    background-size: 26px 26px;
    border-radius: 50%;
    cursor: pointer;
}
.modal-body {
    width: 890px;
    padding: 20px 40px;
}

Важное замечание!

На странице может быть несколько элементов, при нажатии на которые будет открываться модальное окно. Причем не обязательно это будет ссылка. Это может быть кнопка или текст, обернутый необходимым тэгом - span, em и т.п.

Для открытия модального окна с id="offer" элемент должен иметь class="offer"
Для открытия модального окна с id="privacy" элемент должен иметь class="privacy"

Причем если у элемента несколько классов, то этот класс должен идти ПЕРВЫМ!

Например <span class="offer btn red">Договор оферты</span> - класс offer должен быть указан первым!