Как да си направим удобни модални прозорци на CSS3 и JavaScript

Здравейте на всички. Днес ние ще се научим да правим плавно изскачащи модален прозорец със съдържанието вътре. Всичко това е добре, ние ще направим най-вече на CSS3, така че нашите изскачащи прозорци не се зареждат сайта. Е, сега нека да стигнем до урока.

Ι Demo Download

Преди да започнете ..

Тези модални прозорци не са толкова трудно да се направи, толкова повече аз се опитвам да кажа, доколкото е възможно всички подробности. Както ще бъде полезно да се прозореца на модален? Например, представете си, че имате уеб сайт на тяхната компания, която не е домакин на малко количество информация. Но за да намерите информацията, потребителят трябва да се зареди следващата страница. Но, разбира се има по-добър начин за излизане, постави цялата информация в красивия изскачащия прозорец, потребителят все още не е имал време да кликнете върху линка като необходимата информация вече е пред него. По мое мнение това е много удобно и правилно решение.

Плюс повече от тези прозорци е, че те могат лесно да бъдат затворени, като кликнете върху X в горния десен ъгъл. За мен това звучи доста просто, нали? Нека да започнем.

HTML маркиране

Тук ще ви дам кода, който е отговорен за изграждането на навигация на страницата. Така че, естествено, ние ще ги накара да адаптивна.

CSS за изскачащи прозорци малко по-сложни, тъй като в началото имаме всички прозорци са скрити от окото, а след това, след като кликнете върху прозореца за връзка се появи гладко. Също така, тук ще добавим тъмно полупрозрачен фон, който ще се появи заедно с прозорците. И тук ние добавите бутон за затваряне на реда, в който потребителят може по всяко време да затворите модален прозорец.