Модальное всплывающее окно один раз для каждого пользователя

На своем веб-сайте я использую простое модальное всплывающее окно с некоторыми элементами управления вводом (имя, электронная почта, кнопка). Назначение модального всплывающего окна:

  • После заполнения всех обязательных полей, если пользователь нажмет кнопку «Отправить», он получит один файл .pdf.
  • Я запускаю модальное окно при загрузке.

Вот, я пытаюсь сделать:

  1. Откройте модальное всплывающее окно только один раз для пользователя или
  2. Не хочу показывать модальное всплывающее окно пользователям, которые ранее уже заполнили форму

Вот код моего модального всплывающего окна:

<script type="text/javascript">
$(document).ready(function () {
    $("#eBookModal").modal('show');
});
</script>
<div class="modal fade" id="eBookModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="row">
                    <h4 class="modal-title text-center" style="color:#FFFFFF;">Download eBook</h4>
                </div>
            </div>
            <div class="modal-body">
                <form role="form" id="eBookform" class="contact-form"
                      action="file.pdf">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-text" name="FName" autocomplete="off" id="eBook_FName" placeholder="First Name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control form-text" name="LName" autocomplete="off" id="eBook_LName" placeholder="Last Name" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="email" class="form-control form-text" name="email" autocomplete="off" id="eBook_email" placeholder="E-mail" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center" id="eBook_download">
                            <button type="submit" class="btn main-btn" style="color:#fff !important;">Download Now</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


javascript twitter-bootstrap bootstrap-modal bootstrap-4 jquery-cookie
person Nitish Paswan    schedule 18.01.2018    source источник
comment
Где твой код? Опубликуйте код, который у вас есть до сих пор.   -  person WebDevBooster    schedule 18.01.2018
comment
@WebDevBooster, я добавил свой код.   -  person Nitish Paswan    schedule 18.01.2018

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны вести учет модальных дисплеев. Чтобы сохранить эту информацию, вы можете использовать cookie или localStorage. На основе сохраненного значения вы можете решить, показывать ли модальное окно или нет.

Пример ниже использует localStorage в качестве примера:

$(document).ready(function () {
    // Check if user saw the modal
    var key = 'hadModal',
        hadModal = localStorage.getItem(key);

    // Show the modal only if new user
    if (!hadModal) {
        $('#eBookModal').modal('show');
    }

    // If modal is displayed, store that in localStorage
    $('#eBookModal').on('shown.bs.modal', function () {
        localStorage.setItem(key, true);
    })
});

Также доступно как Codepen.

Если вы хотите скрыть модальное окно только от тех, кто уже отправил форму, вы должны установить флаг при отправке формы, например:

$('#eBookform').on('submit', function (event) {
    // event.preventDefault();// depending on your use case
    localStorage.setItem(key, true);
})

Примечание: чтобы сбросить сохраненное значение, просто вызовите localStorage.removeItem('hadModal').

person dferenc    schedule 19.01.2018
comment
Огромное спасибо.. :) - person Nitish Paswan; 22.01.2018

arrow_upward
0
arrow_downward

Если вы просто хотите показать модальное окно один раз при первом посещении, а предыдущий код не работал, попробуйте это!

$(window).load(function(){    
var Modal = document.getElementById('myModal'); 
var key = 'hadModal',
hadModal = localStorage.getItem(key);

if (!hadModal) {
    Modal.style.display = "block";
    localStorage.setItem(key, true);
}

});
person melshor essomassor    schedule 08.11.2018