Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Добавлено в закладки: 0

Хочу с вами поделиться своим user experience.
Существует практика, при открытии диалогового окна (popup, лайтбокса, модального окна) накладывать поверх сайта оверлей. Окно получается сверху, а под opacity:0.7 скрывается наш сайт. Опыт не плохой:

В своей новой теме личного кабинета для плагина WP-Recall - Theme Line я использовал наложение фильтра blur (блюр) и grayscale (оттенки серого) (по ссылке смотрите видео - там наглядно все показано)

Как это происходит:

1. Нам нужно в body добавлять маркер, что у нас открыто диалоговое окно. Используемая в WP-Recall библиотека модального окна SSI, добавляет, при открытии окна, в body класс ssi-modalOpen
2. У нас есть сигнал что окно открыто - добавим стили всему сайту, за исключением самого модального окна:

div:first-of-type - этот селектор говорит нам, что нужно применить стиль к первому элементу после body - типа div. Это почти универсальное средство, но иногда оно может не сработать - например если первым div-ом у вас идет не контент сайта, а что-то другое. В частном случаем можете записать конкретно указав класс в котором находится ваш контент.

И в этом правиле еще упомянут реколлбар - его мы тоже стилизуем.

Вид:

Тут мне не нравится что фоновое изображение загруженное в body выделяется своими цветами. Корректируем его:

Получилось:

Мы достигли результата не затратив особо усилий. Но как быть если вы не используете библиотеку ssi? Самописное меню например. Все просто - в скрипте вашего меню при открытии его, добавляйте класс в body:

а по закрытию меню убирайте класс с помощью .removeClass

Тему превращений при открытии модальных окон можно развить - например прописав в стили например transform: scale(0.9); - так ваш сайт за модальным окном будет чуть чуть уменьшен - как будто отдалившись. Фантазия тут безгранична.

 

Вот такие простые шаги помогут вашим пользователям улучшить прибывание на вашем сайте и позволят им сконцентрироваться на нужных моментах вашего сайта.

1

Автор публикации

не в сети 25 минут

Otshelnik-Fm

253

Вся лента по разработке здесь: http://across-ocean.otshelnik-fm.ru/?author=1&tab=notes&gpf=2295

http://across-ocean.otshelnik-fm.ru/ - список моих работ к плагину WP-Recall

Комментарии: 1038Публикации: 120Регистрация: 27-01-2013Продаж/Покупок: 5263/120