Содержание страницы
домикГлавная / Элементы html и css / Модальное окно при открытии страницы
Модальное окно при открытии страницыТеперь познакомимся с примером, где модальное окно будет автоматически появляться через заданный отрезок времени при открытии страницы.

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

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

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

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

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

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

<script type="text/jаvascript">
var bds = document.getElementById('overlay');
function bdsd() {
	bds.style.visibility = 'visible';
	bds.style.opacity = '1';
	bds.style.transition = 'all 0.7s ease-out 0s';
}
setTimeout(bdsd, 5000);
function swa2(){
	bds.style.visibility = 'hidden';
	bds.style.opacity = '0';
}
</script>

В этом примере setTimeout(bdsd, 5000); я задал время 5 секунд, через которое и появится модальное окно после открытия страницы. Вы укажите разумеется своё.

На этом разбор полётов закончен, спрашивайте что не поняли.
Дата публикации: 24.08.2018
Комментарии
Светлана
20 мая 2019 10:15
Светлана
Здравствуйте!
Хочу на сайт поставить всплывающее модальное окно при заходе посетителей на сайт, но не могу понять что куда ставить. Подскажите подробнее.
Те два файла загружать на сайт в корень папки надо, как я поняла. А дальше что куда.
Мне нужно всплывание с эффектом появления понравилось.
Подскажите пожалуйста!
Admin
20 мая 2019 10:51
Admin
Добрый день, Светлана!
На странице как сделать модальное окно вы копируете код html и css для отображения модального окна.
А после прописываете JS скрипт указанный на этой странице. Это всё!
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!

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

Java скрипт

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