Модальное окно при первом посещении сайта, Bootstrap 3

2 июня 2019

Модальное окно при первом посещении сайта зачастую нужно для магазинов табачной продукции, или секс-шопов. Как вариант таким модальным окном можно оповещать посетителей о важных событиях на вашем сайте 

Данный способ реализуется с помощью стандартного модального окна Bootstrap

Итак, скачивайте и подключайте к сайту jquery.cookie, чтобы окно открывалось один раз для одного посетителя сайта.

А дальше все просто

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Название модали</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <input type="button" class="btn btn-default" onclick="history.back();" value="Покинуть сайт">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        // Проверяем запись в куках о посещении
        // Если запись есть - ничего не происходит
        if (!$.cookie('hideModal')) {
            $('#myModal').modal('show');
        }
        $.cookie('hideModal', true, {
            // Время хранения cookie в днях
            expires: 7,
            path: '/'
        });
    });
</script>

Как видно из кода, данный пример для id="myModal" и времени хранений куков - 7 дней. Плюс в окне уже есть кнопка возврата на предыдущую страницу

<input type="button" class="btn btn-default" onclick="history.back();" value="Покинуть сайт"/> 

Данный метод универсальный и подходит к любому движку, если там есть Bootstrap 3