Стайлинг модални прозорци

Когато DOM са модални прозорци?

Аз обикновено се поставят прозорците на HTML код модалните преди тялото на затваряне.

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

Как се отразява това на екранен четец? Аз не съм експерт по достъпност, но чух, че модален прозорец е доста сложно нещо. Роб Додсън:

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

Фокусиране на клавиатурата трябва да се премине към друг вид транспорт прозореца и когато затворите е да се върнете към предишното activeElement;

Клавиатура фокус трябва да бъде заключен в прозореца модален че потребителят неволно помощта на клавиша Tab не е отишло отвъд прозореца;

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

Роб създаде супер достъпни демо с модален прозорец. Аз също съм виждал скорошен пример през ноември Блоне и Николас Хофман. Можете да видите също ARIA Живи райони. Ако се отнасяте към фокуса ръчно, в долната част на страницата, най-подходящ прозорец настаняване модален.

центровка

Сега аз ще ви покажа един от любимите ми трикове. Метод за вертикално и хоризонтално подравняване без ширина и височина:

Чудесно за модални прозорци, които са обикновено се намира точно центрирани върху екрана и могат да бъдат с различни ширини. Височината на прозореца варира в зависимост от съдържанието.

Ако знаете, ширината и височината на прозореца, можете да използвате други методи. Взех този метод, защото има шанс, че текстът ще бъде леко замъглено и се трансформира. Ако не знаете какво говоря, се търсят други методи за насочване центриране (например отрицателен margin'y).

Фиксирано място?

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

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

Работа с широчина

На големия екран обичайната модален прозорец не е само в центъра, той също има ограничен ширина (като на снимката по-горе).

Проблемни място. На големия екран ние сме добре, но има изобилие от екрани, които дори не 600px ширина.

Лесно е да се определи с помощта на макс ширина:

Работа с височина

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

Ние отново ще спаси максималната стойност:

Работа с припокриване

Ние се опитваме да решим проблема с височината на модален прозорец. Сега трябва да се помисли също се припокриват. Примамливо е да се използва преливен правото на собственост върху .modal елемент, но има два проблема:

ние може да има елементи, които не се нуждаят, за да превъртите;

таван нарязани сянка кутия сянка, че може да се наложи.

Бих предложил да влезе вътрешният съд:

Това района .modal-кураж да превъртате, че е необходимо да определите височината. Има много начини. Един от начините - да позиционирате вътрешния контейнер, така че тя се припокрива всички прозорец модален, след което добавете припокриването:

Модалните прозорци трябва да принуждават потребителя и да е действие, докато имаше и нещо друго. Ако не е нужно да принуди потребителя да действие, помислете за друг елемент от потребителския интерфейс. От модален прозорец трябва да е изход. За модален прозорец се характеризира с голямо разнообразие от бутони и превключватели (например, "Delete" / "Отказ"), както и бутона за затваряне. Ние добавяме към бутон за затваряне прозорец.

Би било разумно да се позиционира върху бутона за затваряне, така че да е винаги в очите. Че потребителят не е имало ситуация, в която той не знае как да се затвори прозореца. Това е, което ни е останало зоната без превъртане.

Стилове добавят себе си

Работа с налагане

Модалните прозорци често се появяват при пълно припокриване фон. Полезно нещо по няколко причини:

застъпване слой да скриват страницата, като по този начин повишаване на основната цел на модален прозорец;

такъв слой може да се запишете на взаимодействието, което е извън прозореца на модален;

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

Закриване на класа, отколкото откриването

Той е изключително примамливо да се скрие клас подразбиране .modal чрез дисплея на имущество: няма. Следван от отварянето на прозореца, за да добавите клас .modal.open .

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

отваряне и затваряне на ключа

Най-основният начин за отваряне и затваряне на прозореца:

Window но все още недостъпни за екранни четци. Помниш ли какво говорихме по-горе. Връзката ще откриете демо, в която акцентът се премества в модален прозорец, заключи и се връщат към елемента, от която идва.

Редакция: Екип webformyself.

Най-IT новини и уеб разработки на нашия канал Телеграма