Как сделать кнопку закрытия окна
Свернуть все окна — горячие клавиши
До реализации графического интерфейса в операционных системах управление компьютером осуществлялось с помощью клавиатуры. Привыкшему к мышке пользователю такой способ управления может показаться неэффективным, на самом деле управление с клавиатуры обладает как минимум двумя преимуществами — более высокой скоростью и большим удобством, обуславливаемым отсутствием необходимости постоянно переключать свое внимание с одного средства управления на другое.
Рассмотрим преимущества использования «горячих» клавиш на примере быстрого сворачивания открытых окон в популярных версиях Windows и MacOS. В Windows имеется фишка, позволяющая сворачивать открытые окна с помощью мышки (об этом будет сказано ниже), но давайте представим, что пользователь ничего о ней на знает. Он станет сворачивать каждое окно отдельно, кликая по средней кнопке управления окном, а ведь свернуть все окна разом можно нажатием всего одной комбинации.
Сворачивание окон с помощью к «горячих» клавиш в Windows XP, 7, 8.1 и 10
Для сворачивания/разворачивания окон в этих версиях операционной системы предусмотрены четыре клавиатурных комбинации.
Как свернуть окна в Windows 7, 8.1 и 10 мышкой
С таким же успехом сворачивать окна можно и с помощью мышки. Если вы присмотритесь к правому краю панели задач Windows 7 и 10, то увидите узкий прямоугольник. Если навести на него мышку и нажать левую кнопку, все открытые окна будут немедленно свернуты. Эта интерактивная область имеется и в Windows 8/8.1, но в этих версиях системы она скрыта, и чтобы ее увидеть, нужно навести курсор мыши на часы в трее.
Повторный клик по этой области восстанавливает свернутые окна. Если же вы нажмете правую кнопку мыши, удерживая курсор на прямоугольнике, появится всплывающее меню с опциями, задающими поведение системы при клике по интерактивной области.
Свернуть все окна в Windows XP можно с помощью мышки, кликнув по одноименной иконке, расположенной рядом с кнопкой Пуск.
Сворачивание окон с помощью функции Aero Shake
В Windows 7, 8.1 и ранних версиях десятки свернуть все окна кроме активного можно также с помощью функции Aero Shake. Для этого нужно захватить мышкой заголовок окна и потрясти его. При этом фоновые окна как бы упадут вниз и свернуться на панель задач, свернется и активное окно, но не в трей или панель задач, а на рабочий стол. Функция Aero Shake была отключена в сборке Windows 10 21277, но она по-прежнему доступна и может быть активирована соответствующим твиком реестра.
Сворачивание окон в MacOS
Свернуть окна в MacOS можно тремя способами: с помощью «горячих» клавиш, с помощью функции «Активные углы» и с помощью специального жеста. Перед тем как пускать в ход клавиши, нужно проверить настройки этих самых клавиш.
Перед тем как использовать функцию «Активные углы», ее так же необходимо настроить.
Отныне при наведении курсора мыши в этот угол все окна будут сворачиваться.
Наконец, владельцы макбуков с сенсорной панелью типа Magic Trackpad могут сворачивать и восстанавливать окна жестом TrackPad. Чтобы свернуть окна, положите на панель пальцы и разведите их в стороны (большой палец влево и три пальца вправо), чтобы восстановить свернутые окна, сделайте обратный жест — сведите пальцы вместе.
Кнопки «Закрыть»: паттерны и антипаттерны
На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».
Неудачные паттерны
▍Паттерн №1: элемент div и фоновое изображение
Взглянем на HTML-код, используемый для создания кнопки «Закрыть»:
Проблемы и их решение
Ниже приведён список проблем, которые характерны для данного варианта реализации кнопки «Закрыть». Зная об этих проблемах, можно наметить пути их решения.
▍Паттерн №2: элемент div и иконка
Проблемы и их решение
▍Паттерн №3: иконки из Font Awesome
Проблемы и их решение
▍Паттерн №4: ссылка «Закрыть»
Проблемы и их решение
▍Паттерн №5: ссылка «Закрыть» с текстом
Вот HTML-код этого паттерна:
Проблемы и их решение
▍Паттерн №6: ссылка «Закрыть» без атрибута href
Проблемы и их решение
▍Паттерн №7: ссылка-местозаполнитель и элемент img
Вот HTML-код этого паттерна:
Проблемы и их решение
▍Паттерн №8: радиокнопка
Вот применяемый здесь стиль:
Проблемы и их решение
▍Паттерн №9: кнопка с иконкой
Как обычно, сначала рассмотрим разметку:
Проблемы и их решение
▍Паттерн №10: кнопка с SVG-изображением
Проблемы и их решение
▍Паттерн №11: старый добрый символ X
Вот HTML-код, реализующий этот паттерн:
Проблемы и их решение
Вот CodePen-проект, в котором собраны неудачные паттерны создания кнопок «Закрыть»
Альтернативы неудачным паттернам
▍Решение №1: кнопка с видимым текстом без иконки
Вот разметка, применяема в этом решении:
Особенности
▍Решение №2: кнопка с видимым текстом и с иконкой, скрытой от ассистивных технологий
Особенности
▍Решение №3: кнопка со скрытым текстом и со значком, который видим на экране, но скрыт от ассистивных технологий
Вот HTML-код этого решения:
Особенности
▍Решение №4: ещё один вариант кнопки со скрытым текстом и со значком, который видим на экране, но скрыт от ассистивных технологий
Особенности
▍Решение №5: использование Font Awesome
Вот, ради полноты изложения, удачный пример кнопки «Закрыть», при создании которой используется Font Awesome:
▍Общие замечания
Иногда имеет смысл использовать метки с более подробными описаниями действий, вроде «Закрыть окно», или «Закрыть галерею», или «Закрыть рекламу».
Если вы применяете решения сторонних разработчиков для оформления модальных окон, диалоговых окон и прочего подобного, пожалуйста, перед включением их в состав своего сайта, поинтересуйтесь тем, как именно реализованы эти решения. Не стоит слепо доверять другим в вопросах качества кода и обеспечения доступности контента.
Здесь можно найти примеры реализации удачных паттернов кнопок «Закрыть».
Как сделаны кнопки «Закрыть», которые используются в ваших проектах?
Похожие публикации
Интересные CSS-находки в дизайне Twitter
Практический пример использования render-функций Vue: создание типографской сетки для дизайн-системы
Руководство по веб-дизайну для разработчиков
Комментарии 55
Они могут выглядеть идентично или почти идентично из-за наличия/отсутствия текста Close
Да ну, это все мелочи. Главный антипаттерн — это когда
Не стоит забывать, что эта кнопка «закрыть» появляется только через N секунд после того как сам поп-ап элемент на экране возникнет.
И на самом деле это не кнопка «закрыть», а очередной «скрыто» спрятанный попандер. А реальная кнопка «закрыть» с другой стороны окна бледным текстом и мелким шрифтом (чтобы никто, не дай бог, не догадался).
Бывает тоньше — кнопка [x] есть сразу, но ровно через N.M секунд примерно соответствующих времени реакции пользователя она прыгает в другую область баннера.
Ну и толсто — тупо реагирующие на мышь и уползапющие тоже встречались.
И потом эти люди жалуются что такие нехорошие пользователи ставят адблок
Это, конечно, было интересное исследование, но вы упустили, на мой взгляд, самый приятный вариант:
1. Делаем попап, внутрь (на одном уровне) кладём кнопку и обёртку контента. В кнопку кладем пустой span, он будет ловить клики вне попапа (ну и/или не только клики).
2. Попапу задаём z-index: 999 (можно больше), кнопке закрыть — z-index: 1, контенту — z-index: 2. Таким образом, всё содержимое кнопки всегда будет ниже содержимого контента
4. Саму кнопку размещаем где хотим.
5. Для span’а задаём фиксированное позиционирование (за счёт чего он забивает на то, что его родитель (кнопка) маленькая, и спокойно примет заданные размеры, а их мы зададим во весь экран).
5. С помощью псевдоэлементов ::before и ::after делаем две полоски, поворачиваем, закругляем углы — делаем вообще всё, что придёт в голову. Размещаем их справа, делаем из них крестик.
6. При наведении на кнопку ставим любое действие с псевдоэлементами, чтобы было красиво. Можно их вращать, скалировать, перекрашивать, добавлять обводки — в общем, делать вообще всё, что в голову взбредет.
Скринридеры читают «Закрыть» внутри кнопки, псевдоэлементы делают красиво, span прикрепляет область вокруг попапа к кнопке.
Пример, сделанный за 15 минут на коленке =)
Как свернуть все окна применив горячие клавиши Windows XP 7 8 10 и MacOS
Добрый день, друзья. Пользователи системы Windows довольно часто открывают сразу множество окон, не задумываясь над тем, что это большая нагрузка на процессор. В экстренных ситуациях (например, зашел человек, для которого информация на экране не предназначена), люди начинают быстро сворачивать окна по одному, что может занять до 30 и более драгоценных секунд. Между тем, можно свернуть все окна довольно, быстро буквально за пол секунды через горячие клавиши или клик мышкой.
Программисты Microsoft для этой цели создали специальную функцию, которая работает от версии ХР. Вам в подобных ситуациях больше не стоит сворачивать окна по одному. Есть несколько методов, которые помогут вам свернуть их все разом.
Как свернуть окна с помощью горячих клавиш Windows
Как скрыть окна за один клик
Это основной способ для экстренного сворачивания окошек. Причем на мой взгляд, самый быстрый и удобный. Что интересно, большинство людей про этот метод не знают.
Итак, в нижнем меню правее других ярлычков находится неприметный прямоугольник. Если по нему кликнуть мышкой, все окна сразу свернутся. В Windows 10 он находится рядом с окном уведомлений. В ХР данная функция отсутствует, но, можно создать похожую функцию и разместить её на панели задач.
Как создать кнопочку «Свернуть все окна» для Виндовс XP
Чтобы создать подобную команду и разместить её ярлык на панели, первым делом щелкнем по пустому пространству монитора. Далее, в ниспадающем меню нажмём «Создать», затем в контекстном окошке выберем «Текстовый документ». Можно просто открыть блокнот и выбрать «Новая запись».
Итак, в нашей записи вводим значение:
Command=2
IconFile=explorer.exe,3
[Taskbar]
Command=ToggleDesktop
Нам нужно сохранить текст под особым расширением и кодировкой. В меню ищем «Файл».
В ниспадающем окошке выберем «Сохранить как». Итак, называем документ удобным названием, к примеру — «Скрываем окна». После данного названия прописываем расширение scf. Над строкой «Тип файла» ищем «Все файлы». Над строкой «Кодировка» найдём значение UTF-8. Жмём «Сохранить».
Теперь данный ярлык окажется на «Рабочем столе». Закрепляем его на «Панели задач». Всё, мы создали нужную функцию для ХР.
В прочих версиях этой системы данная функция может не сработать, т.к. ОС считает, что данная команда уже присутствует в правом углу.
MacOS
Вывод: свернуть все окна довольно просто. Выбираем один из методов, приведённых выше, и сворачиваем окна. Мне удобнее скрывать окна с помощью мышки. Иногда же полезнее их скрывать окна именно через горячие клавиши, т.к. пользование мышкой довольно заметно, и вошедший человек (начальник) может решить, что вы что-то от него скрываете, т.к. сразу закрыли все окна мышкой! 🙂 Успехов!
Как можно сразу закрыть все окна на компьютере?
Доброго всем времени суток, мои дорогие друзья. С вами как обычно Дмитрий Костин. Скажите пожалуйста, бывает ли у вас такое, что вы понаоткрываете кучу папок и приложений, а потом затрачиваете кучу времени, чтобы свернуть или закрыть каждое окно, чтобы выйти на рабочий стол? Я знаю у многих есть такой заскок. В этот момент думаешь: «Да откуда вас столько взялось? Я столько не открывал!».
Ну как бы то ни было, в сегодняшней статье я хочу вам протянуть руку помощи в этом вопросе, а именно показать вам, как закрыть все окна на компьютере разом, ну или хотя бы просто их все свернуть. Таким образом вам не придется закрывать каждую папочку отдельно. Ну что, готовы? Тогда поехали!
Полное закрытие
Дальше все просто. Запускаете эту утилиту и все открытые папки и приложения одновременно закрываются. Happy End! Эту программулину вы можете вынести на рабочий стол или на панель задач, чтобы она всегда была под рукой.
Свернуть все окна
Но конечно же бывают моменты, когда папки и приложения полностью закрывать не нужно, а просто нужно выйти на рабочий стол. Решение есть, причем не нужно никаких дополнительных приложений. Все есть в самой системе Windows.
В Windows XP изначально при установке вы могли лицезреть ярлычок «Свернуть все окна», но в более поздних версиях такого ярлычка уже не было. думал я. Но потом узнал, что оказывается разработчики не убрали эту функцию с панели задач. Они просто ее хитро спрятали.
Знаете, куда вам нужно ткнуть, чтобы свернуть все окна единым махом? Вам просто нужно кликнуть на панели задач в самом конце, после отображения времени. Круто, да? Такая маленькая скрытая полосочка).
Также в этом случае вам поможет обычная несложная комбинация клавиш WIN+D. Окна свернутся разом и без вопросов. Кроме того есть еще одна комбинация, выполняющая ту же саму функцию — WIN+M. Ну а если вы хотите снова открыть все окошки разом, то в этом нам поможет другая комбинация, а именно SHIFT+WIN+M.
Создание специальной кнопки
Я знаю, что многие не любят использовать комбинации клавиш и им проще нажать на какую-нибудь кнопочку, чтобы все сработало. В таких случаях вам поможет один проверенный способ.
Создайте обыкновенный текстовый документ и скопируйте туда следующий текст:
Только сразу говорю, что все дожно быть написано в точности так, код в одну строчку не прокатит.
После того как вы это сделали, просто сохраните документ под любым удобным названием, но расширение файла замените с txt на scf. Этот документ должен изменить свой вид. Можете его протестировать, запустив его. Вы увидите, что всё работает.
Но если у вас вдруг возникли какие-либо проблемы, то вы можете взять мой готовый файл отсюда и использовать его.
Ну вот вроде и все, что я вам сегодня хотел поведать о такой функции. Надеюсь, что вам статья понравилась и она будет полезна для вас. Ну и если вы еще не подписаны на обновления моего блога, то обязательно сделайте это, чтобы не пропустить чего-нибудь важного. Ну а вам я желаю удачи и снова с удовольствием буду ждать на страницах моего блога. Пока-пока!