Главнаяhtml и cssМодальное окно при открытии страницы

Модальное окно при открытии страницы

Модальное окно при открытии страницы

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

Обычно модальное окно при открытии страницы используют для показа особенной текстовой информации, с помощью которой web-мастер хочет ещё более заинтересовать посетителя.

Дочитав до этого места вы должны были увидеть и закрыть пример всплывающего окна при открытии страницы без вашего ведома и без принудительного вызова с вашей стороны.

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

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

Время, через которое модальное окно должно появиться при открытии html страницы, вы каждый будете прописывать своё. А изменяется оно в коде простенького скрипта.

Для того, чтобы сделать модальное окно при открытии страницы, достаточно прописать код всплывающего окна со стилевыми свойствами и простой к нему ява скрипт.

ОСОБОЕ ВНИМАНИЕ!
Код всплывающего окна и стилевое оформление для него я прописывать здесь не буду, потому как оно полностью описано на странице:
как сделать модальное окно в последнем примере (скопируйте оттуда без кода кнопки).

А после пропишите ниже скрипт, который и будет вызывать окно, когда пользователь откроет страницу.

Код java скрипта для модального окна


<script type="text/javascript">
  var delay_popup = 10000;
  setTimeout("document.getElementById('overlay').style='visibility:visible;opacity:1';", delay_popup);
</script>

В этом примере var delay_popup = 10000; я задал время 10 секунд, через которое и появится модальное окно после открытия страницы. Вы укажите разумеется своё.

На этом разбор полётов закончен, спрашивайте что не поняли.

Будь в курсе первым!

Java скрипт

Подпишись на выход новых новостей из рубрики СКРИПТЫ для сайта html и будешь всегда в курсе о новейших технологиях в области сайтостроения.

Рейтинг: 3.8/5     Оценили: 6

Похожие публикации

Комментарии к статье 0