Модален CSS: Прост, бърз и удобен

HTML5 /CSS3 свойствата дават на разработчиците възможност бързо да създават логически диалози с възможност за въвеждане на малки количества информация, потвърждение на действието или информиране на посетителя.

Функционалността, предоставена чрез функциите на javascript, е достъпна за прост HTML код и няколко CSS правила. Ефектът ще бъде не по-малък, а в някои случаи дори по-голям.

Съдържание на модалния прозорец

Покажете информацията и потвърдете получаването му: прозорецът се появява в браузъра и сайтът очаква посетителят да потвърди, че чете конкретна информация. Изходни въпроси и отговор: да или не. Изходни полета (форма, заявка) и получаване на текст, данни или набор от стойности във всички полета на формуляри.


Вариантите за използване на модален прозорец могат да излязат с набор, но в действителност това е обикновен HTML етикет. Използват се свойствата на псевдо-клас: target и pointer-events. Първият определя какво да правите, когато задържите мишката (друга посока). Вторият позволява на елемента да може да реагира отново на събитията.

Пример за информационен прозорец

Фигурата показва връзката, която кешът се отваря с модалната CSS с информацията. Едва след като посетителят кликне върху "затварящия елемент" на прозореца - "Х", прозорецът изчезва и отново ще се появи връзка, за да отвори прозореца. Диалогът започва с етикет "а" и завършва с етикет "а". Възможностите за реализиране на тази идея могат да донесат много.
В този пример стилът на описание на връзката към отварянето на прозореца иЗатварянето му се извършва по различни начини. Първата връзка прави видим id id scWiindow, който създава илюзията за отваряне на прозорец, в който има информация и само един бутон (връзка) за затваряне.


Докато прозорецът не бъде затворен, на страницата няма да се предприемат никакви действия. С помощта на модалния прозорец HTML /CSS можете да проектирате контроли, които моментално се появяват на страницата, блокират контролите и ви позволяват да персонализирате настройките, които искате. След приключване на процеса можете да възстановите логиката на страницата в нормален режим.

Динамика на изскачащи прозорци

Модерните характеристики на HTML5 /CSS3 се поддържат от всички браузъри. Разработчикът разполага с широка гама от функционалности за използване на градиент, прозрачност, трансформация, преместване, преобразуване, въртене и други действия с етикети.
Нищо не пречи на комбинирането на различни ефекти един с друг в търсене на перфектни форми и оригинален дизайн. Модалният прозорец на CSS е идеята за използване на указател-събития и: target, но нищо не ни пречи да използваме други правила на стилове. Въпреки това, с усърдието да проектираме дизайн, който може да изненада всеки посетител, трябва да се отбележи: JavaSript е управляван начин за създаване на диалог. Тук можете да контролирате всичко. Един прост CSS модал, който използва комбинация от тагове, преобразуване и външен вид чрез ротация (например), е гаранция за значително забавяне в работата на страницата. Модерните стилове са разнообразни възможности, но тези характеристики се изпълняват стриктно в алгоритмите за изпълнение.Правила за хипертекст и CSS. Тук можете да управлявате само чрез стойността на правилата и размера на показаните етикети.
Голям размер на тага, сложна комбинация от градиенти - гаранция, че страницата ще бъде показана със закъснение или модален CSS ще се появи, когато посетителят вече е изчерпал търпението.

Системи за управление на обекти

Можете да създавате собствени системи за управление за функционални страници чрез модални прозорци. Ckeditor & amp; CSS към Drupal 7 е добър пример за създаване на модални диалози. Използвайки голям арсенал от API функции и инструменталните инструменти на тази популярна система за управление на сайтове, можете бързо и ефективно да манипулирате правилата без задълбочено познаване на HTML5 /CSS3, т.е. непрофесионални разработчици.
Други системи за управление на обекти представят своите варианти за използване на модални прозорци и идеи за този вид диалог. Използването на javascript тук може да бъде скрито или приложено за други цели, но е важно всяко CMS да не позволява на разработчика (потребителя) да прекалява със създаването на сложен и отнемащ време дисплей на дизайна. Използването на системи за управление на сайтове днес е популярен начин за създаване на уеб ресурси, като автоматично се използват съвременни функции за създаване на модални прозорци от CSS таблици и не се изисква действително познаване на действието му.

Идентичност на логиката на диалога на страниците

Предимството на прилагането на стилове за използването на javascript е, че веднъж може да се опише логиката на диалога във всички варианти на модалнияпрозорци:
  • изходна информация за информацията;
  • искане за потвърждение на операцията;
  • промяна на параметрите на страницата;
  • въвеждане на данни и др.
  • След диалога (за всички варианти на възможни заявки от сайта и отговорите на посетителя) се разработва, той може да се използва по същия начин както за текущата работа, така и за създаването на подобни уеб ресурси.
    javascript не предоставя такава възможност, а осигурява управляван диалог. Сценарият трябва да се коригира във всеки отделен случай. Логиката на програмирания диалог е различна от описателната чрез HTML /CSS. Всяка опция има своите предимства. Най-доброто решение е да се комбинират и използват минималните възможности на всяка опция. Разработчикът може да приложи сложните и зрелищни характеристики на съвременните инструменти в развиващите се сайтове, но интелигентният подход към дизайна, комбиниращ ползите от всяка опция, е най-желателен.

    Dynamic Styling

    Модалната кутия CSS е набор от няколко набора от правила за множество етикети. javascript е способността за динамично създаване на тагове и стилове. В този контекст можете да пишете прехвърлени функции, които не изискват връзката в цялостната функционалност на сайта, и неговия спомагателен арсенал. В тази реализация на такава идея, можете да развиете функции, които създават диалози по правилния начин, и разработчикът може да не предава частите от кода на HTML и CSS-таблицата в техните други проекти.
    Чрез свързване на един js-файл, който ви позволява да създавате специфични за прозореца прозорци чрез извикване на съответната функция, можетеоптимално съчетават ползите от управлявани и описателни опции за създаване на модален прозорец на CSS и HTML.

    Свързани публикации