Поп-нагоре (модален) прозорец на HTML и CSS

Предишен ◈ Следващото

За да се покаже важни съобщения или само промените, направени на сайта, можете да използвате изскачащия прозорец. Изскачащи прозорци са два вида: нормални и модалните.







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

изскачащ прозорец

Първата стъпка в създаването на изскачащ прозорец е да се създаде елемент

(Или всеки друг елемент) и неговия проект:

това

и тя ще бъде използвана като изскачащ прозорец. Сега ние скрий използване на имота дисплей на висота и добавяне на линк, когато се натисне, ще се появи прозорец:

Използване на псевдо-класа: Целта ни избират и прилагат стилове към елемент, който беше извършен преход. Така след прехода на стойността на елемента позоваване дисплей

промяна от кой да блокирате.

Сега е необходимо да се организира

средната част на страницата, така че да прилича на изскачащ прозорец. Направете го абсолютно позиция и я центрира вертикално и хоризонтално:







Следващата стъпка ще бъде да се приложи скрит прозорец, като щракнете върху страницата, или на самия прозорец. За да направите това, ние трябва да го поставите

във вътрешността на елемента :

След това поставете елемент и то се разпростре в цялата ширина и височина на прозореца. с молба да се покаже: няма; и пренасочване на нашата връзка към него:

елемент

премахване на дисплея: няма; (Това вече не е необходимо, тъй като сега се крият ). В резултат на родителя Сега изпълнява скрий изскачащ чрез пренасочване на страница селекция.

В създаването на прост изскачащ прозорец е завършен.

прозорец модален

За да създадете изскачащи прозорци модалните, вземете елемента

. легализира и добавяне на линк, когато се натисне, тя ще се появи:

Следващата стъпка в създаването на пълноправен модален прозорец ще добавите бутон, който ще се скрие нашия прозорец. Бътън е направена от обикновени връзки, да го добавите към нашата

и попълване:

За да се осъществи на затъмняването на страницата, когато модален прозорец, трябва да сложите всички налични в допълнителен код за прозорци

:

позициониране на родител

и то се разпростре в цялата ширина и височина на прозореца. с молба да се покаже: няма; и пренасочва обаждането да се свържат през прозореца към него.

В дъщерно