Разное

Модальное окно: Модальное окно — Попап-элементы — Компоненты — Контур.Гайды

21.06.2023

javascript — Bootstrap 5 не работает модальное окно

Вопрос задан

Изменён 1 год 4 месяца назад

Просмотрен 2k раз

не работает модальное окно не могу понять в чем причина, ошибок в консоли нет, делал все по официальной документации.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Форма администратора">
<title>Учет техники | Администратор</title>
<!-- Bootstrap стили CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Иконки стили CSS -->
<link  href="css/font-awesome/css/font-awesome.
 
 min.css" rel="stylesheet">
</head>
<body>
<button type="button" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>
<!-- Modal -->
<div tabindex="-1" aria-labelledby="exampleModalLabel" 
    aria-hidden="true">
    <div>
        <div>
            <div>
                <h5>Modal title</h5>
                <button type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div>
                ...
            </div>
            <div>
                <button type="button" data- 
                 dismiss="modal">Close</button>
                <button type="button">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script src="js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
  • javascript
  • html
  • bootstrap5

Замените data-toggle="modal" —> data-bs-toggle="modal"

data-target="#exampleModal" —> data-bs-target="#exampleModal"

data-dismiss="modal" —> data-bs-dismiss="modal"

Пример

<link href="https://cdn.
 
 jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>
<!-- Modal -->
<div tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div>
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-bs-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>
3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Модальное окно | это… Что такое Модальное окно?

В графическом интерфейсе пользователя модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет. Модальными преимущественно реализованы диалоговые окна. Также модальные окна часто используются для привлечения внимания пользователя к важному событию или критической ситуации.[1]

Содержание

  • 1 Назначение
  • 2 Критика
  • 3 См. также
  • 4 Примечания

Назначение

Как правило модальные окна применяются, когда требуется:

  • Потребовать от пользователя ввод какой-либо информации — начиная от простого «да/нет» до большого количества настроек или данных, необходимых для продолжения работы с родительским окном или приложением;
  • Привлечь внимание пользователя к чему-либо важному. Этот вариант часто критикуется специалистами по эргономике, потому что редко это важно настолько, чтоб блокировать работу приложения целиком, но, тем не менее, продолжает использоваться по той причине, что он существенно более лёгок в реализации;
    [2]    [3][4]
  • Указать пользователю на невозможность отмены выполняемого им действия и потребовать подтверждения этого действия. Этот вариант тоже критикуется, вместо него рекомендуется обеспечить-таки возможность отмены.[5]

Критика

Модальное окно полностью блокирует весь рабочий процесс до тех пор, пока не будет закрыто. Пользователь может не понять, что окно требует его внимания, одновременно не понимая, почему главное окно программы не реагирует на его действия.

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

Специалисты по эргономике, напротив считают, что в подавляющем большинстве ситуаций, ограничение свободы действий пользователя и строгая последовательность этих действий приводит к существенному уменьшению удобства и расстраивает пользователей.[6] Использование модальных окон заставляет пользователя концентрировать своё внимание на каком-то одном аспекте задачи, тогда как на практике он может одновременно работать с большими объёмами информации, размещёнными в различных окнах приложения и постоянно переключаться между ними. В таких случаях использование модальных окон ведет к уменьшению эффективности работы.

Создание окна, модального относительно рабочего стола, могло нарушить доступность всей системы в целом. Например, такая функция была предусмотрена в Microsoft Windows 3.x, 95 и 98, однако была убрана из NT и последующих версий, и модальность окна относительно системы больше не блокировала доступ к ней.[7]

См. также

  • Оконный интерфейс
  • Диалоговое окно
  • Дочерние окна
  • Панель инструментов
  • Палитра

Примечания

  1. ↑ Quince UX patterns explorer Modal Panel  (англ. ).
  2. ↑ Джоэл Спольски, User Interface Design for Programmers: Designing for People Who Have Better Things To Do With Their Lives (перевод на русский)
  3. ↑ Реймонд Чен, The Old New Thing: The default answer to every dialog box is «Cancel» (перевод на русский)
  4. ↑ Jeff Atwood, Coding Horror: Teaching Users to Read
  5. ↑ Аза Раскин, A List Apart: Never Use a Warning When you Mean Undo (перевод на русский)
  6. ↑ Cooper Alan About Face 2.0: The Essentials of Interaction Design. — Wiley. — ISBN 0764526413
  7. ↑ How To Create a System-Modal Program/Window in Visual Basic — Microsoft Support
Это заготовка статьи о компьютерах. Вы можете помочь проекту, исправив и дополнив её.

Это примечание по возможности следует заменить более точным.

Почему модальные окна убили всплывающие окна

Пользователи привыкли видеть всплывающие окна повсюду в Интернете. Сегодня его место заняли модальные окна. Модальные окна доминируют в сети, а всплывающие окна ушли в прошлое.

Модальные окна лучше

До появления модальных окон пользователям приходилось управлять несколькими окнами на своем экране, потому что всплывающие окна открывали отдельное окно поверх текущего окна пользователя. Сегодня с модальными окнами пользователям не приходится иметь дело с несколькими окнами.

Когда открывается модальное окно, оно открывается внутри текущей страницы. Это означает, что пользователям нужно работать только в окне своего браузера, и им не нужно иметь дело с всплывающими окнами. Это также делает открывающееся окно более похожим на часть веб-сайта.

Модальные окна труднее не заметить, чем всплывающие окна. Всплывающие окна пользователи часто могут пропустить, потому что они не привлекают их внимание. Когда пользователи щелкают окно браузера, окно браузера появляется на переднем плане, а всплывающее окно скрывается за ним. Пользователи могут легко пропустить важное окно, случайно щелкнув окно браузера и даже не подозревая об этом.

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

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

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

Модальные окна также безопаснее и надежнее для пользователей. Когда они открываются, они не выглядят и не воспринимаются как реклама. Пользователям легко отклонить всплывающие окна как рекламу, потому что многие всплывающие окна открываются одинаково.

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

Критика

Многие дизайнеры критикуют модальные окна по совершенно неправильным причинам. Проблема не в модальных окнах, а в дизайнерах, неправильно использующих модальные окна.

Одна из критических замечаний заключается в том, что модальные окна не позволяют вам переключаться между двумя источниками информации. Если пользователю необходимо вернуться к окну браузера для получения информации, модальное окно — не тот виджет, который следует использовать.

Назначение модального окна — полностью переключить внимание пользователя с окна браузера на новое окно. Это полезное пользовательское ограничение, необходимое для взаимодействий, требующих полного внимания пользователя. Например, если открывается важное диалоговое окно, пользователи должны его увидеть. Все их внимание должно быть переключено с текущего рабочего процесса на важное сообщение.

Другой пример: открывается модальное окно, и пользователям нужно выполнить определенное действие. Модальное окно заставляет пользователей завершить это действие, прежде чем вернуться в окно браузера. Это делает пользователей более продуктивными, потому что они выполняют одно действие за раз вместо многозадачности. Пользователи с меньшей вероятностью запутаются и потеряются в своем рабочем процессе из-за контроля и ограничений модальных окон.

Модальные окна — полезный и эффективный виджет интерфейса, который можно использовать, когда дизайнеры используют их правильно. Они настолько лучше, чем всплывающие окна, что неудивительно, почему всплывающие окна сегодня почти исчезли. Модальные окна изменили Интернет к лучшему. Несмотря на критику, которую они получают, они здесь, чтобы остаться.

Комплект для разработки пользовательского интерфейса
Партнер

Диалоговый (модальный) шаблон | ПНГ | ВАИ

Диалоговый (модальный) шаблон

Об этом шаблоне

Диалоговое окно — это окно, наложенное либо на основное окно, либо на другое диалоговое окно. Окна под модальным диалогом инертны. То есть пользователи не могут взаимодействовать с содержимым за пределами активного диалогового окна. Инертное содержимое за пределами активного диалогового окна обычно визуально скрыто или затемнено, поэтому его трудно различить, а в некоторых реализациях попытки взаимодействия с инертным содержимым приводят к закрытию диалогового окна.

Как и немодальные диалоги, модальные диалоги содержат свою последовательность вкладок. То есть Tab и Shift+Tab не перемещают фокус за пределы диалога. Однако, в отличие от большинства немодальных диалогов, модальные диалоги не предоставляют средств для перемещения фокуса клавиатуры за пределы диалогового окна без закрытия диалогового окна.

Роль alertdialog — это диалоговая роль особого случая, разработанная специально для диалогов, отвлекающих внимание пользователей на краткое важное сообщение. Его использование описано в шаблоне диалогового окна оповещения.

Примеры

  • Пример модального диалогового окна: Демонстрирует несколько уровней модальных диалоговых окон как с небольшим, так и с большим объемом содержимого.
  • Пример диалогового окна выбора даты: Демонстрирует диалоговое окно, содержащее сетку календаря для выбора даты.

Взаимодействие с клавиатурой

В последующем описании термин tabbable element относится к любому элементу со значением tabindex , равным нулю или больше. Обратите внимание, что значения больше 0 настоятельно не рекомендуются.

  • Когда открывается диалоговое окно, фокус перемещается на элемент внутри диалогового окна. См. примечания ниже относительно начального размещения фокуса.
  • Вкладка :
    • Перемещает фокус на следующий элемент с вкладками внутри диалогового окна.
    • Если фокус находится на последнем элементе с вкладками внутри диалогового окна, фокус перемещается на первый элемент с вкладками внутри диалогового окна.
  • Shift + Tab :
    • Перемещает фокус на предыдущий элемент с вкладками внутри диалогового окна.
    • Если фокус находится на первом элементе с вкладками внутри диалогового окна, фокус перемещается на последний элемент с вкладками внутри диалогового окна.
  • Escape : Закрывает диалоговое окно.

Примечание

  1. Когда открывается диалоговое окно, фокус перемещается на элемент, содержащийся в диалоговом окне. Как правило, фокус изначально устанавливается на первом фокусируемом элементе. Однако наиболее подходящее размещение фокуса будет зависеть от характера и размера контента. Примеры включают:
    • Если содержимое диалога включает в себя семантические структуры, такие как списки, таблицы или несколько абзацев, которые необходимо воспринимать, чтобы легко понять содержимое, т. рекомендуется добавить tabindex="-1" к статическому элементу в начале содержимого и изначально сфокусировать этот элемент. Это облегчает пользователям вспомогательных технологий чтение контента путем навигации по семантическим структурам. Кроме того, рекомендуется не применять aria-describedby в диалоговом контейнере в этом сценарии.
    • Если содержимое настолько велико, что фокусировка на первом интерактивном элементе может привести к прокрутке начала содержимого за пределы поля зрения, рекомендуется добавить tabindex="-1" к статическому элементу в верхней части диалогового окна, например заголовок диалогового окна или первый абзац и изначально сосредоточить внимание на этом элементе.
    • Если диалоговое окно содержит заключительный этап процесса, который нелегко отменить, например, удаление данных или завершение финансовой операции, может быть целесообразно сосредоточить внимание на наименее деструктивном действии, особенно если отменить действие сложно или невозможно. В таких обстоятельствах часто используется шаблон диалогового окна оповещения.
    • Если диалог ограничен взаимодействиями, которые либо предоставляют дополнительную информацию, либо продолжают обработку, может быть целесообразно установить фокус на элемент, который, вероятно, будет использоваться наиболее часто, например, на кнопку OK или Продолжить .
  2. Когда диалоговое окно закрывается, фокус возвращается к элементу, вызвавшему диалоговое окно, если только:
    • Вызывающий элемент больше не существует. Затем фокус устанавливается на другой элемент, который обеспечивает логический рабочий процесс.
    • Схема рабочего процесса включает следующие условия, которые иногда могут сделать выбор в пользу другого элемента более логичным выбором:
      1. Маловероятно, что пользователям потребуется немедленно повторно вызывать диалоговое окно.
      2. Задача, выполненная в диалоговом окне, напрямую связана с последующим шагом рабочего процесса.
      Например, у сетки есть связанная панель инструментов с кнопкой для добавления строк. Кнопка «Добавить строки» открывает диалоговое окно, в котором запрашивается количество строк. После закрытия диалогового окна фокус помещается в первую ячейку первой новой строки.
  3. Настоятельно рекомендуется, чтобы последовательность вкладок всех диалоговых окон включала видимый элемент с ролью кнопки , которая закрывает диалоговое окно, например значок закрытия или кнопку отмены.
  • Элемент, служащий диалоговым контейнером, играет роль диалогового окна.
  • Все элементы, необходимые для работы диалогового окна, являются потомками элемента с ролью диалогового окна .
  • Элемент контейнера диалога имеет значение aria-modal true .
  • В диалоговом окне есть:
    • Значение, установленное для свойства aria-labelledby, которое ссылается на видимый заголовок диалогового окна.
    • Метка, заданная aria-label.
  • При необходимости свойство aria-describedby устанавливается для элемента с ролью диалогового окна , чтобы указать, какой элемент или элементы в диалоговом окне содержат содержимое, описывающее основную цель или сообщение диалогового окна. Указание описательных элементов позволяет программам чтения с экрана объявить описание вместе с заголовком диалогового окна и изначально выделенным элементом при открытии диалогового окна, что обычно полезно, только когда описательное содержимое простое и может быть легко понято без структурной информации. Целесообразно опустить указание aria-described by , если содержание диалога включает семантические структуры, такие как списки, таблицы или несколько абзацев, которые необходимо воспринимать, чтобы легко понять содержание, т. единая неразорванная струна.

Примечание

  • Поскольку пометка диалогового окна как модального путем установки для aria-modal значения true может помешать пользователям некоторых вспомогательных технологий воспринимать контент за пределами диалогового окна, пользователи этих технологий столкнутся с серьезными негативными последствиями, если диалоговое окно помечено как модальное, но не ведет себя как модальное.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *