Как да създадете модален прозорец на чист CSS без JavaScript, CSS
Диалогов прозорец - това е чудесен начин да получите кратко съобщение или информация. В момента, модален прозорец е много популярен елемент на уеб дизайна. Ако добавите страница някои специално съдържание, най-добре е да го поставите на модален прозорец:
Създаване на прозорец модален CSS
Първото нещо, което трябва да се създаде прост HTML-код:
Не забравяйте, че ние ще се използва само CSS. вместо модален прозорец JQuery на. Затова се прилага селектор псевдо ": преди мишена".
След това трябва да спаси цялото съдържание на модален прозорец. Вътре Разделение, ние ще постави хипервръзка. Тя се затваря контейнерът, който получаваме, използвайки CSS. След това можете да поставите заглавие с няколко абзаца текст под него. Нашата HTML-маркиране, сега ще изглежда така:
предварително зададени стилове
Сега имаме хипервръзка, увито в DIV. Можете да се пристъпи към назначаването на стилове за контейнер, който ще го направи по-практични. Първо, създаване на модален клас за модален прозорец на CSS. За него, ние използваме псевдо: преди:
Ние създаваме прозорец модален. определя фиксирана позиция за него. Тя ще се придвижи надолу, когато потребителят превърта страницата.
В допълнение, ние си поставихме за горния десен, дъното и левия край на стойността на нула до тъмния фон обхваща целия екран. Сега трябва да зададете на заден план, граничен радиус за .modal-диалог. както и фиксирано положение. Нашата CSS код ще бъде, както следва:
След това трябва да зададете модален диалогов превежда собственост на 0. Ето, че поставяме началото на страницата: 20%:
Ето някои стилове, които искате да използвате, за да Модал прозорец изглеждаше красиво:
Сега, след като сме си поставили HTML стилове модален прозорец и го направи функционална, тя остава за нас, за да създадете бутон в долния десен ъгъл. CSS код: