Модальное окно в html: Делаем модальные окна для сайта. Заботимся об удобстве и доступности / Хабр

Содержание

JavaScript: модальное диалоговое окно из HTML-формы (каркас): ilyachalov — LiveJournal

Решил задачу «Модальное диалоговое окно с формой» к подразделу 4.4 «Отправка формы: событие и метод submit» второй части учебника по JavaScript.

В задаче требуется написать функцию showPrompt(html, callback), которая выводит в область просмотра браузера модальное диалоговое окно с сообщением html (первый параметр функции showPrompt), текстовым полем ввода и двумя кнопками: «Ok» и «Отмена». Содержимое модального диалогового окна строится с помощью HTML-формы и HTML-элементов на этой HTML-форме. При нажатии клавиши «Enter» в текстовом поле ввода или нажатии кнопки «Ok» должна быть выполнена функция callback (второй параметр функции showPrompt) с параметром, представляющим собой значение из текстового поля ввода. При нажатии клавиши «Esc» или кнопки «Отмена» должна быть выполнена функция callback (второй параметр функции showPrompt) с параметром, представляющим собой значение null

По сути нам предлагается создать с помощью связки HTML, CSS и JavaScript аналог модального диалогового окна, выдаваемого браузером при запуске функции prompt его интерфейса. Тут подробнее:

https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
https://learn.javascript.ru/alert-prompt-confirm

Сначала нужно уяснить, что такое «модальное диалоговое окно». С понятием «диалоговое окно» лично мне всё давно уже понятно: это элемент пользовательского интерфейса, окно, в котором происходит диалог между пользователем и программой. Тут подробнее:

https://ru.wikipedia.org/wiki/Диалоговое_окно

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

модальное диалоговое окно — это диалоговое окно, которое является дочерним для некоего «главного окна» и пока модальное диалоговое окно открыто, пользователю запрещен доступ к функциям главного окна, хотя пользователь всё еще может видеть то самое главное окно.

Тут подробнее:

https://ru.wikipedia.org/wiki/Модальное_окно

Но почему это окно называется модальным? Откуда произошло это слово? Очевидно, что в русский язык оно пришло из английского языка, от слова «modal». В английском языке слово «modal» происходит от слова «mode» (по-русски «режим»). Например, в русском языке существуют понятия «режимный объект» или «режимное предприятие». О чем здесь речь? «Режимным» называют такой объект (или такое предприятие), на котором действуют некие особые правила («режим»), ограничивающие деятельность работников и посетителей по сравнению с обычными, более либеральными, правилами, действующими за границами территории этого объекта (предприятия). Точно также «режимное» («модальное») диалоговое окно ограничивает пользователя в его действиях так, что пользователь не может работать с главным окном, пока не закончит работу с модальным окном. Думаю, по-русски правильнее было бы говорить не «модальное окно», а «режимное окно», но словосочетание «модальное окно» уже является устоявшимся, поэтому буду пользоваться им.

В общем, об этом же коротко сказано и в тексте постановки задачи, цитата:

Форма является модальным окном, это значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.

Кроме текста постановки задачи у нас имеется тестовая HTML-страница index.html и файл стилей к ней style.css, код которых можно посмотреть в песочнице. Также есть демонстрационный пример, который можно рассмотреть на отдельной странице и на странице задачи во фрейме. * * *
В конце текста постановки задачи есть следующее примечание, цитирую:

P.S. HTML/CSS исходного кода к этой задаче содержит форму с фиксированным позиционированием, но вы должны сделать её модальной.

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

Тело тестовой HTML-страницы:

<body>
  <div>
    <form>
      <div>Введите что-нибудь...
        <br>Пожалуйста...</div>
      <input name="text" type="text">
      <input type="submit" value="Ok">
      <input type="button" name="cancel" value="Отмена">
    </form>
  </div>
</body>

Диалоговое окно здесь представлено HTML-элементом div с идентификатором prompt-form-container (будем называть его «контейнером»). Внутри этого контейнера содержится HTML-форма с идентификатором prompt-form. Эта HTML-форма содержит требуемые в задаче элементы: 1) сообщение, представленное HTML-элементом div с идентификатором prompt-message; 2) текстовое поле ввода с именем text; 3) две кнопки «Ok» и «Отмена» (кнопка «Ok» имеет тип submit, значит, можно будет использовать событие submit, а кнопка «Отмена» имеет имя cancel).

Внесем дополнения в тело тестовой HTML-страницы (я пометил изменения красным цветом):

<body>
  <!-- содержимое главного окна -->
  <h3>Кликните на кнопку ниже</h3>
  <button>Кликните, чтобы увидеть форму</button>
  <!-- диалоговое окно, дочернее для главного -->
  <div hidden>
    <form>
      <div>Введите что-нибудь...
        <br>Пожалуйста...</div>
      <input name="text" type="text">
      <input type="submit" value="Ok">
      <input type="button" name="cancel" value="Отмена">
    </form>
  </div>
  <script src="myscript.js"></script>
</body>

Заголовок «Кликните на кнопку ниже» и кнопку «Кликните, чтобы увидеть форму» я добавил, посмотрев работу демонстрационного примера от авторов задачи (в код не подглядывал, определил на глаз; там несложно определить, что используется HTML-элемент h3 и какой-то код HTML для создания кнопки [в HTML кнопку можно создать несколькими путями].

.. я решил взять для этого HTML-элемент button и дать ему идентификатор button).

Очевидно, что этот заголовок и эта кнопка представляют собой содержимое «главного окна» по отношению к нашему модальному диалоговому окну.

При открытии тестовой HTML-страницы модальное диалоговое окно должно быть скрыто, поэтому я добавил атрибут hidden к контейнеру нашего модального диалогового окна. (На время разбора стилей на языке CSS к модальному диалоговому окну этот атрибут можно убрать, но в итоговом варианте тестовой HTML-страницы он должен присутствовать.)

В файле myscript.js

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

Как это всё должно будет работать? Очевидно, предполагается, что пользователь загрузит тестовую HTML-страницу (главное окно) и увидит заголовок «Кликните на кнопку ниже» и кнопку «Кликните, чтобы увидеть форму». При желании пользователь может нажать на эту кнопку, после чего должно появиться наше модальное диалоговое окно, а содержимое главного окна должно стать недоступным, но остаться видимым. После этого пользователь сможет поработать с модальным диалоговым окном и в итоге он его закроет. Модальное диалоговое окно снова станет невидимым, а содержимое главного окна станет доступным для пользователя. И так далее.

* * *
Превращение вышеописанного каркаса диалогового окна на языке HTML в модальное диалоговое окно выполняется с помощью стилей на языке CSS, описанных в отдельном файле (ссылка на него была приведена выше).

Продолжение тут.

Как прикрепить готовое модальное окно к сайту с помощью CSS и JQuery

11 371 любопытных

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

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

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

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

Данные модальные окна довольно просты и легки в установке. А так же присутствуют три примера всплывания: плавное сверху вниз, просто плавное появление, и стандартное без анимации.

В общем давайте прикреплять 🙂

Исходники

Первое, что нужно сделать это скачать сами исходники окон. Затем мы увидим следующее:

Как видите в исходниках у нас есть файл demo.html который Вы можете открыть и сразу же посмотреть пример всплывающих окон на компьютере. Так же присутствует скрипт самих окон jquery.reveal.js, затем jquery-1.4.4.min.js — это фреймворк jquery, если он у Вас уже прикручен, его можно удалить. И конечно же стили модальных окон reveal.css.

Ещё пару изображений которые используются в оформлении, они не так важны.

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

Стили

Для начала нужно закачать скрипты и стили на хостинг в корневую папку сайта. Затем между тегами <head> </head> вставляем следующее:

<link rel="stylesheet" href="reveal.css"/>

таким образом мы прикрепили стили окон. Главное не забудьте поменять ссылку на стили. В данном случае это просто reveal.css.

Скрипты jquery

Теперь прикрепляем скрипты. Опять же между тегами <head> </head> пишем следующее:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

Это библиотека jquery. Повторюсь, возможно она уже прикреплена на Вашем сайте. Проверьте. Если да, то пропустите этот шаг.

Теперь сам скрипт модальных окон:

<script type="text/javascript" src="jquery. reveal.js"></script>

Вот видите, ничего сложного нет. Тем более, что уже большую часть работы сделали. 🙂 Главное не забудете указать правильную ссылку на скрипт jquery.

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

HTML

Так как здесь три примера, выбирайте тот который Вам ближе к душе:

<a href="#"  data-reveal-id="myModal">Плавно сверху</a>

с этим классом модальное окно появляется плавно сверху.

<a href="#" data-reveal-id="myModal" data-animation="fade">Плавно</a>

здесь окно просто появляется плавно.

<a href="#" data-reveal-id="myModal" data-animation="none">Стандартно</a>

в этом случае появление окна стандартно, без анимации.

После того ка Вы определились со стилем всплывания окна, после ссылки ставим сам код модального окна. Он выглядит так:

<div>
 <h2>Зоголовок модального окна</h2>
 <p>Это стандартный вид модального окна, его оформление Вы с лёгкостью сможете изменить в CSS. </p>
 <a>&#215;</a>
 </div>

Как видите между тегами <h2> и </h2> стоит заголовок, который нужно изменить как Вам нужно. А между тегами <p> и </p> сам текст.

Вот и всё, дорогие друзья. Если у Вас возникнут какие нибудь трудности или вопросы — спрашивайте в комментариях. До скорых встреч.

Bootstrap Modals

❮ Предыдущая Далее ❯

Модальный плагин

Модальный плагин представляет собой диалоговое/всплывающее окно, которое отображается поверх текущего страница:

Некоторый текст в модальном режиме.

Наконечник: Плагины могут быть включены по отдельности (используя индивидуальные настройки Bootstrap). «modal.js») или все сразу (используя «bootstrap.js» или «bootstrap.min.js»).

Как создать модальное окно

В следующем примере показано, как создать базовое модальное окно:

Пример

Попробуйте сами »

Объяснение примера

9001 2 Часть «Триггер»:

Для запуска модальное окно, вам нужно использовать кнопку или ссылку.

Затем включите два атрибута data-*:

data-toggle="modal" открывает модальное окно
data-target="#myModal" указывает на идентификатор модального окна

Модальная часть:

Родительский

модального окна должен иметь идентификатор, который является то же, что и значение атрибута data-target, используемого для запуска модального окна («myModal»).

Класс .modal идентифицирует содержимое

как модальное и обращает на это внимание.

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