Содержание страницы
Age-Dragon.com
Главная / Элементы 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 секунд, через которое и появится модальное окно после открытия страницы. Вы укажите разумеется своё.

На этом разбор полётов закончен, спрашивайте что не поняли.
Комментарии
smsДобавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!

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

Java скрипт

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