модальное всплывающее окно при загрузке страницы с использованием чистого JavaScript

Question

Я хотел бы знать, как создать модальное всплывающее окно без использования jquery или boostrap, но с использованием javscript. Модальное всплывающее окно должно отображаться только при загрузке страницы в течение 30 секунд и автоматически закрываться. пытался использовать jquery и начальной загрузки, но нужно создать в javascript

<script>
     $(document).ready(function () {
     $('.modal').modal('show');
      });
  </script>

 <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times; 
            </button>
            <h4 class="modal-title">Load Bootstrap modal on page launch</h4>
          </div>
        <div class="modal-body">
          <p>
           This is a simple Demo to launch a model on page load.
          </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data- 
           dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

Создание элементов DOM для модального и его фона. Сначала добавьте класс show, затем используйте setTimeout для удаления класса из classList через 3 секунды

setTimeout(() => {
  document.getElementsByClassName('modalContainer')[0].classList.remove('show');
}, 3000)

.mainContainer,
.modalContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.modalContainer {
  background: black;
  opacity: 0.5;
  z-index: 10;
  display: none;
}

.modal {
  width: 200px;
  height: 200px;
  z-index: 15;
  background: red;
}

.show {
  display: flex;
}

body,
html {
  height: 100%;
  width: 100%;
}

<div class='mainContainer'>
  <div class='modalContainer show'>
    <div class='modal'>Here is the modal</div>
  </div>

</div>

Answer 2

Во-первых, всякий раз, когда вы выполняете какие-либо операции с пользовательским интерфейсом (такие как открытие модального режима, доступ к dom-узлам и т. Д. И т. Д.), Всегда ждите загрузки документа.(Пример приведен в Jquery, но вы также можете использовать vanilla js).

$(document).ready(function () {
 // Perform your operations here
});

Как только вы показываете модал, вы можете настроить функцию timeOut setTimeout(hideModal, 500), где

hideModal -Функция, которая скрывает ваш модальный

500 - период ожидания, после которого вы хотите выполнить функцию в ms