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

Question

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

В Linux, Mac OS X и других системах POSIX используйте версии Python в сочетании с переключателем -m для запуска соответствующей копии pip:

python2.7 -m pip install SomePackage
python3.4 -m pip install SomePackage

(соответственно версия

В Windows используйте пусковую установку py Python в комбинации с переключателем -m:

py -2.7 -m pip install SomePackage  # specifically Python 2.7
py -3.4 -m pip install SomePackage  # specifically Python 3.4

, если вы получите сообщение об ошибке для py -3.4, попробуйте:

pip install SomePackage

0

javascript html5 bootstrap-4

задан sowmiya 19 March 2019 в 03:50

2 ответа

Другие вопросы по тегам:

javascript html5 bootstrap-4

Похожие вопросы:

score 0 · Answer 1

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

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

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

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

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

score 0 · Answer 2

Создание элементов 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>

[118 ]