Казахстан, Караганда, пр. Н.Абдирова, 19

director@topone.kz

Для того чтобы показать модальное окно в Bootstrap 4 только один раз при входе на сайт, можно воспользоваться функцией JavaScript в сочетании с использованием localStorage для отслеживания, показывалось ли уже окно.

Вот пример решения:

  1. HTML код для модального окна:
<!-- Модальное окно --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">Добро пожаловать!</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Ваше приветственное сообщение. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div>
  1. JS код для показа модального окна один раз:
<script> document.addEventListener("DOMContentLoaded", function() { // Проверяем, если модальное окно уже было показано if (!localStorage.getItem('modalShown')) { // Если нет, показываем его $('#myModal').modal('show'); // Устанавливаем флаг в localStorage, чтобы не показывать снова localStorage.setItem('modalShown', 'true'); } }); </script>

Как это работает:

  • Когда пользователь заходит на сайт, localStorage проверяется на наличие ключа modalShown.
  • Если такого ключа нет (то есть пользователь заходит первый раз), модальное окно будет показано, и затем ключ будет установлен в localStorage, чтобы при следующем посещении окно не показывалось.
  • Если ключ существует, модальное окно не будет показано.

Таким образом, модальное окно показывается только один раз для каждого пользователя на одном устройстве.

Готовы поработать с нами ?!

ПН-ПТ 10:00-18:00

director@topone.kz
8 (705) 908 68 00