Содержание

bugoaneo / Модальное окно: одно и несколько
Делаем модальные окна для сайта. Заботимся об удобстве и доступности
1. Разметка HTML и CSS
1.1. Каркас модальных окон
Закрыть окно
Как закрыть модальное окно извне?
Решение
Доступные способы закрытия модальных окон
Визуальный дизайн
Доступный дизайн
Размещение
Размещение модального окна
Размещение [x]
Оптимальный вариант
Мысли в заключение

bugoaneo / Модальное окно: одно и несколько

В этoм мехaнизме мoдaльнoгo oкнa стили вaжны не меньше, чем скрипты: мы применяем СCS трюк с центрoвкoй дивa: снaчaлa мы oтступaем oт верхнегo и прaвoгo крaя экрaнa пo 50%, пoтoм oтступaем oт верхнегo и левoгo крaя мoдaльнoгo дивa пo минус пoлoвине высoты и ширины дивa сooтветственнo. oверлэй(пoдлoжкa) и сaм мoдaльный див дoлжны oбязaтельнo быть display: none; т.е. oни никaк не дoлжны учaствoвaть в oбычных сoбытиях нa сaйте. у пoдлoжки z-index дoлжен быть выше, чем у oстaльных элементoв нa сaйте. У мoдaльнoгo oкнa z-index дoлжен быть выше, чем у всегo oстaльнoгo. СКРИПТ $(document).ready(function() < // вся мaгия пoсле зaгрузки стрaницы $(‘a#go’).click( function(event) < // лoвим клик пo ссылки с event.preventDefault(); // выключaем стaндaртную рoль элементa $(‘#overlay’).fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку function() < // пoсле выпoлнения предъидущей aнимaции $(‘#modal_form’) .css(‘display’, ‘block’) // убирaем у мoдaльнoгo oкнa display: none; .animate(, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз >); >); /* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */ $(‘#modal_close, #overlay’).click( function() < // лoвим клик пo крестику или пoдлoжке $(‘#modal_form’) .animate(, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх function() < // пoсле aнимaции $(this).css(‘display’, ‘none’); // делaем ему display: none; $(‘#overlay’).fadeOut(400); // скрывaем пoдлoжку > ); >); >); Однoвременнo изменяя пoзиции пo вертикaли(top) и прoзрaчнoсти(opacity) с пoмoщью animate мы сoздaем интересный эффект пoявления мoдaльнoгo oкнa в стиле бутстрaпa. Рoль дивa с не тoлькo в эстетическoм плaне — этa пoдлoжкa спaсaет нaс oт бoльшoгo гемoррoя в случaе зaкрытия мoдaльнoгo oкнa при клике не нa крестик, a нa любoй другoй элемент. Дoпoлнительнo: КAК СДЕЛAТЬ ВOЗМOЖНЫМ OТКРЫТИЕ НЕСКOЛЬКИХ МOДAЛЬНЫХ OКOН? Здесь все чутoк слoжнее, нo принцип тoт же, прoстo теперь будем укaзывaть у ссылки кaкoе кoнкретнo oкнo будем пoкaзывaть. Для этoгo нaпишем в aтрибут href у ссылки селектoр мoдaльнoгo oкнa, кoтoрoе неoбхoдимo вывести типa: href=»#modal_id» или href=».modal_class» НOВЫЙ СКРИПТ: $(document).ready(function() < // зaпускaем скрипт пoсле зaгрузки всех элементoв /* зaсунем срaзу все элементы в переменные, чтoбы скрипту не прихoдилoсь их кaждый рaз искaть при кликaх */ var overlay = $(‘#overlay’); // пoдлoжкa, дoлжнa быть oднa нa стрaнице var open_modal = $(‘.open_modal’); // все ссылки, кoтoрые будут oткрывaть oкнa var close = $(‘.modal_close, #overlay’); // все, чтo зaкрывaет мoдaльнoе oкнo, т.е. крестик и oверлэй-пoдлoжкa var modal = $(‘.modal_div’); // все скрытые мoдaльные oкнa open_modal.click( function(event) < // лoвим клик пo ссылке с клaссoм open_modal event.preventDefault(); // вырубaем стaндaртнoе пoведение var div = $(this).attr(‘href’); // вoзьмем стрoку с селектoрoм у кликнутoй ссылки overlay.fadeIn(400, //пoкaзывaем oверлэй function() < // пoсле oкoнчaния пoкaзывaния oверлэя $(div) // берем стрoку с селектoрoм и делaем из нее jquery oбъект .css(‘display’, ‘block’) .animate(, 200); // плaвнo пoкaзывaем >); >); close.click( function() < // лoвим клик пo крестику или oверлэю modal // все мoдaльные oкнa .animate(, 200, // плaвнo прячем function() < // пoсле этoгo $(this).css(‘display’, ‘none’); overlay.fadeOut(400); // прячем пoдлoжку > ); >); >); CSS oстaется тaким же, нo нaм нaдo пoменять #modal_form нa .modal_div и #modal_close нa .modal_close, ибo id дoлжен быть уникaльным. НУ И НOВAЯ HTML СТРУКТУРA, ПOРЯДOК НЕ ВAЖЕН: Клaсс open_modal у ссылoк неoбхoдим т.к. именнo через негo мы привязывaем действие oткрытия мoдaльных oкoн. oчевиднo, чтo ссылoк нa oднo и тoже oкнo мoжет быть нескoлькo, нo кaждoе oкнo дoлжнo сoдержaть уникaльный id или другoй aтрибут, чтoбы oднoзнaчнo укaзaть чтo именнo будем oткрывaть. (источник http://dontforget.pro/javascript/prostoe-modalnoe-okno-na-jquery-i-css-bez-plaginov/)

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Делаем модальные окна для сайта. Заботимся об удобстве и доступности

Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.

Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.

В итоге было задумано сделать собственное простое решение.

Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:

Arctic Modal,
jquery-modal,
iziModal,
Micromodal.js,
tingle.js,
Bootstrap Modal (из библиотеки Bootstrap) и др.

(в статье не рассматриваем решения на базе Frontend-фреймворков)

Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.

Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».

Итак, чтобы нам хотелось видеть?

Окна должны открываться как можно быстрее, без тормозов браузера, с возможностью анимировать открытие и закрытие.
Под окном должен быть оверлей. Клик/тап по оверлею должен закрывать окно.
Страница под окном не должна прокручиваться.
Окон может быть несколько. Открытие одного определенного окна должно осуществляться кликом на любой элемент страницы с data-атрибутом, который мы выберем.
Окно может быть длинным – прокручиваемым.
Желательно поработать над доступностью, а также с переносом фокуса внутрь окна и обратно.
Должно работать на IE11+

Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.

Начнём с разметки.

1. Разметка HTML и CSS

1.1. Каркас модальных окон

Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.

Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):

Закрыть окно

Но при этом автоматически закрывалась вся программка полностью.

Делала закрытие из другого окна

Второе окно открывалось и сразу же закрывалось все полностью.

После этого написала

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

Подскажите как это можно решить плиз.

Как закрыть окно формы и открыть окно другой
Код такой. Нужно по нажатии кнопки закрыть форму 1 и открыть форму 2. но, что-то так не работает.

Закрыть окно Приложения
Привет. дело в том что у меня есть два окна (форм1 и форм2). первое открываеться при запуске, в.

Как закрыть модальное окно извне?
Добрый день! Не могу уже несколько дней разобраться как реализовать следующее: У меня есть.

Нажатием на кнопку, открыть/закрыть новое окно
При программирование под Windows, мне нжно при нажатии на кнопку, что открывалось новое окно и при.

Метод Exit вызывает следующие события и выполняет сопоставленные условные действия:

Событие FormClosing вызывается для каждое формы, представленной свойством OpenForms. Это событие не может быть отменено посредством задания для свойства Cancel его параметра FormClosingEventArgs значения true.

Если один или более обработчиков отменяют событие, метод Exit возвращается, не выполняя дальнейших действий. В противном случае событие FormClosed происходит при каждом открытии формы, после чего все выполняющиеся циклы обработки сообщений, а также формы закрываются.

Примечание
Метод Exit не вызывает события Closed и Closing, которые устарели относительно .NET Framework 2.0.

Как закрыть модальное окно извне?

Не могу уже несколько дней разобраться как реализовать следующее:

У меня есть основная форма MainForm

Из нее вызывается форма с данными DataForm
Важно что бы DataForm была модальным окном, поэтому вызываю ShowDialog

Но проблема в том, что в MainForm есть асинхронный процесс (слушатель RFID (COM) считывателя), и этот процесс так же открывает DataForm. И он должен соответственно переоткрывать данную форму, а не создавать очередь (как это у меня получается).

В основном вопрос, как их MainForm закрыть программно DataForm?
Из основного процесса никак, если я правильно понял. но используя потоки и тп.

Подскажите хоть куда копать. а то я уже страниц 10 Гугла пролез.

Как создать модальное окно
Добрый день. Пишу многооконное приложение на C#. И необходимо сделать так, чтобы на время, пока.

Повторное открытие формы: форму, уже отображенную, нельзя отобразить как модальное диалоговое окно
Приветствую вас уважаемые ! Вот помогите пожалуйста решить! При повторном открытии формы.

Создать модальное окно (дочернее окно) как в одноклассниках
Здраствуйте всем, Нужна помощь. Я хочу создать модальное окно (дочерное окно) в ASP.NET на примере.

Решение

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Подскажите как создается модальное окно
Как можно создать модальное окно, которое бы блокировало выполнение приложения до нажатия на ньом.

Как модальное окно, нарисованное в XAML, подключить к событию клик?
Добрый день, Не знаю, правильно ли я тему назвал, щас попробую уточнить что интересует. .

Как можно открыть модальное окно без кнопки ‘close window’?
Кто знает как можно открыть модальное окно без кнопки ‘close window’.

WinAPI: Как нажать кнопку в другом приложении, если в нем открыто модальное окно
В общем есть пару вопросов; 1) Как по заголоку окна узнать имя класса 2) int hwnd.

Доступные способы закрытия модальных окон

Давайте поговорим о великих побегах. Нет, речь пойдет не о волшебных способах ускользнуть, подобно фокусу Гудини с наручниками или Биврёсту, который использовал Тор. Вместо этого мы поговорим о вполне обыденном явлении – об интерактивной иконке, которая удаляет надоедливые всплывающие окна, закрывающие желаемый контент. Если модальные, диалоговые, всплывающие окна… как бы вы их ни называли, являются необходимым злом, то нам нужно создать доступные «аварийные люки» для их закрытия.

Визуальный дизайн

Обычный UX-шаблон для закрытия окна довольно прост. История символа [x] восходит к компьютерному дизайну 1970-х годов. Вероятно, его первым появлением было меню Atari TOS – список действий, привязанных к буквам и символам клавиатуры. [x] был командой для выхода (Exit). Затем его использовал NeXT, который вдохновил Windows, и стал стандартным символом для закрытия окна в 1995 году с массовым внедрением Windows во всем мире. Это означает, что нет необходимости заново изобретать колесо, используйте символ известный во всем мире.

Доступный дизайн

Мы начнем с основ – всегда должен быть [x], даже если пользователь может тапнуть по фону, свайпнуть или использовать кнопку «Назад», чтобы также закрыть модальное окно.

Иконка vs Буква

Создайте иконку, а не используйте типографскую букву, которая соответствует остальной части вашего набора иконок. Должно быть четко понято, что это [x], у которого все четыре конца, четко разделены. Лично я предпочитаю угол 90 ° и регулирую вес в соответствии с набором иконок.

Высокий контраст vs Низкий контраст

Цвет должен быть нейтральным и соответствовать рекомендованному a11y коэффициенту контрастности 4: 1. Конечно, для всплывающих окон куда лучше, когда [x] беловато-серый и едва заметен, но это, друзья мои, то, что мы называем темным паттерном. Делая [x] едва видимым, мы вынуждаем пользователя выполнять основное действие, как будто оно обязательное. Это приводит к разочарованию пользователей и ложноположительному эффекту для бизнеса.

В контейнере vs Без контейнера

Иконка должна быть заключена в контейнер для обозначения относительного размера цели касания (tap target) и, чтобы отличить интерактивные иконки от статических, особенно, когда они расположены рядом.

Если иконка и контейнер имеют минимальный размер tap target (48x48dp / pt), сделайте цель касания больше, чем изображение кнопки, и не перекрывайте ее другими интерактивными элементами.
Если эта иконка находится внутри интерактивной панели, то эта панель уже создает кликабельное пространство – ура!

Размещение

Контент всплывающего окна не должен восприниматься как блокировка, и способ выхода из него должен легко распознаваться как действие, связанное со всплывающим окном. Несмотря на то, что традиционно большинство программ под Windows размещают закрытие окна в верхнем правом углу, в настоящее время HIG от Apple и Material Design от Google размещают иконки навигации вверху слева. Ни одна из систем не дает четких рекомендаций, когда речь заходит о модальности.

Размещение модального окна

Большая часть модального контента является необязательной, за исключением оповещений, поэтому они не должны ощущаться блокирующими основной контент. Хотя традиционное модальное окно появляется в центре экрана, существует новая тенденция размещать их в нижней части экрана, чтобы они казались менее блокирующими. В зависимости от контента, который, скорее всего, будет под модальным окном, вы можете вставить его сбоку… или нет.

Снизу vs По центру

Размещение [x]

Внутри. Появляется внутри модального окна. Это наиболее четко связывает [x] с модальным окном и хорошо сочетается с эстетикой плоского дизайна, однако добавляет сложность внутренней компоновке заголовка внутри модального окна.

На границе модального окна. Разрыв непрерывной линии привлекает наибольшее внимание к [x], но имеет особый стиль визуального дизайна, который добавляет визуальную сложность и кажется менее утонченным.

Снаружи. Появляется за пределами модального окна. Это подчеркивает дизайн модальности, однако [x] может быть перепутан с элементами интерфейса внизу.

Справа vs Слева. Иконки от Meg Robichaud

Конец (справа) Размещение [x] на правой стороне больше подходит для легкого нажатия большим пальцем правой руки и не пересекается со статическими иконками.

Старт (слева) Размещение [x] на левой стороне соответствует текущей парадигме навигации, однако увеличивает вертикальную высоту модального окна из-за его близости к выровненной по левому краю пиктограмме и является еще одной целью нажатия на больших телефонах.

Это для языков с чтением слева направо. «Старт» – это место, где пользователь начинает читать контент, и «конец», где он останавливается. В языках с чтением справа налево вы должны сделать все наоборот.

Оптимальный вариант

Наша текущая оптимальная компоновка – это выровненное по нижнему краю модальное окно с иконкой [x], заключенной в контейнер на внутренней, верхней правой стороне.

Просто текст, изображение и иконка

Мысли в заключение

Вы также можете использовать две кнопки, расположенные горизонтально, одна из которых «Отклонить». Это отличная альтернатива, настоятельно рекомендованная Material Design, но в случае, если вы не хотите, чтобы кнопка «Отклонить» была слишком заметной, не хотите, чтобы ее могли случайно нажать, или у вас возникли проблемы с переводом при локализации, кнопка [x] является отличным универсальным решением.

Автор статьи – Линзи Берри, в настоящее время занимает должность design systems lead в Lyft. Она планирует публиковать статьи раз в две недели. Линзи пишет статьи о системах дизайн -мышления и процессе проектирования, чтобы внести свой вклад в дизайн-сообщество. Подпишитесь на ее блог на Medium!

Windows закрыть модальное окно