У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Введение в HTML элемент dialog

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

До существования элемента диалогового окна, мы могли использовать только функции встроены в JavaScript для отображения текста сообщений alert и confirm. Они не могут быть стилизованы и не могут отображать ничего, кроме текста.

Также диалоги alert и confirm не могут иметь никаких кнопок, кроме встроенных.

Чтобы упростить создание диалогов без добавления библиотек, теперь мы можем использовать элемент dialog для создания всплывающих диалоговых окон.

В этой статье мы рассмотрим, как добавлять элементы dialog в наши приложения и как с ними работать.

Создание диалогов

Для создания диалогов мы добавим элемент dialog следующим образом:

<dialog open>
  <p>Greetings!</p>
</dialog>

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

В Chrome это выглядит примерно так:

Мы можем добавить любой HTML-элемент. Например, мы можем добавить форму следующим образом:

<dialog open>
  <form method="dialog">
    <p>
      <label>
        Name:
      </label>
      <input type='type' name='name'>
    </p>
    <p>
      <label>
        Favorite Fruit:
      </label>
      <select name='fruit'>
        <option value='apple' selected>Apple</option>
        <option value='banana'>Banana</option>
        <option value='grape'>Grape</option>
      </select>
    </p>
    <menu>
      <button value="cancel">Cancel</button>
      <button id="confirm-btn" value="default">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="dialog-button">Update Fruit</button>
</menu>

<output></output>

В dialog у нас есть элемент form с method установленным как dialog. Это позволяет нам установить возвращаемое значение диалога, которое мы можем использовать после закрытия окна, нажав «Confirm».

У нас также есть элементы input и select, чтобы позволить нам что - то вводить в нашу форму.

Кроме того, у нас есть кнопка с идентификатором dialog-button, чтобы открыть наше диалоговое окно.

Затем в нашем коде JavaScript мы можем управлять открытием и закрытием диалога и получать введенные значения следующим образом:

const dialogButton = document.getElementById('dialog-button');
const dialog = document.querySelector('dialog');
const output = document.querySelector('output');
const input = document.querySelector('input');
const select = document.querySelector('select');
const confirmBtn = document.getElementById('confirm-btn');

dialogButton.addEventListener('click', () => {
  if (typeof dialog.showModal === "function") {
    dialog.showModal();
  }
});

select.addEventListener('change', (e) => {
  confirmBtn.value = [select.value, input.value].join(' ');
});

input.addEventListener('change', (e) => {
  confirmBtn.value = [select.value, input.value].join(' ');
});

dialog.addEventListener('close', () => {
  output.value = dialog.returnValue;
});

Чтобы открыть dialog у нас есть:

dialogButton.addEventListener('click', () => {
  if (typeof dialog.showModal === "function") {
    dialog.showModal();
  }
});

Метод showModal открывает dialog.

Также у нас есть слушатели для select и input чтобы получить их значения, если пользователь что-то вводит.

Стилизация фона

Чтобы стилизовать фон dialog, мы можем выбрать его с помощью псевдоэлемента ::backdrop и применить к нему стили. Фон рисуется только тогда, когда отображается dialog.

Например, мы можем стилизовать его следующим образом:

dialog::backdrop {
  background-color: lightblue !important;
}

Элемент dialog экономит нам некоторые усилия при создании всплывающих окон. Нам не нужны библиотеки или много кода для создания простых диалогов.

Источник:

#HTML

Присоеденяйся в тусовку

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

Попробовать