ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

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

Решил задачу «Модальное диалоговое окно с формой» к подразделу 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 id="prompt-form-container">
    <form id="prompt-form">
      <div id="prompt-message">Введите что-нибудь...
        <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>

  <!-- содержимое главного окна -->
  <h2>Кликните на кнопку ниже</h2>
  <button id="button">Кликните, чтобы увидеть форму</button>

  <!-- диалоговое окно, дочернее для главного -->
  <div id="prompt-form-container" hidden>
    <form id="prompt-form">
      <div id="prompt-message">Введите что-нибудь...
        <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-элемент h2 и какой-то код HTML для создания кнопки [в HTML кнопку можно создать несколькими путями]... я решил взять для этого HTML-элемент button и дать ему идентификатор button).

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

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

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

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

* * *

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

Продолжение тут.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments