::backdrop

Бэкдропы появляются в следующих случаях:

• Элементы, которые были переведены в полноэкранный режим с помощью API полноэкранного режима Element.requestFullscreen() метод.
• <dialog> элементы, которые были отображены в верхнем слое с помощью вызова HTMLDialogElement.showModal().
• Элементы всплывающего окна, которые были отображены в верхнем слое с помощью вызова HTMLElement.showPopover().

Если несколько элементов размещены в верхнем слое, каждый из них имеет свой ::backdrop псевдоэлемент.

/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
  background: rgb(255 0 0 / 25%);
}

Элементы размещаются в стеке «последним вошел — первым вышел» (LIFO) в верхнем слое. Псевдоэлемент ::backdrop позволяет затемнить, стилизовать или полностью скрыть всё, что находится под элементом верхнего слоя.

::backdrop не наследуется и не наследует свойства от других элементов. Нет ограничений на свойства, применяемые к этому псевдоэлементу.

В этом примере мы используем псевдоэлемент ::backdrop для стилизации бэкдропа, используемого, когда открыто модальное <dialog>.

HTML

Мы включаем <button>, который при нажатии откроет включенное <dialog>. При открытии <dialog> фокус переносится на кнопку закрытия диалогового окна:

<dialog>
  <button autofocus>Close</button>
  <p>This modal dialog has a beautiful backdrop!</p>
</dialog>
<button>Show the dialog</button>

CSS

Мы добавляем фон к бэкдропу, создавая цветной круг с помощью градиентов CSS:

::backdrop {
  background-image: radial-gradient(
      circle,
      #fff 0 5vw,
      transparent 5vw 20vw,
      #fff 20vw 22.5vw,
      #eee 22.5vw
    ),
    conic-gradient(
      #272b66 0 50grad,
      #2d559f 50grad 100grad,
      #9ac147 100grad 150grad,
      #639b47 150grad 200grad,
      #e1e23b 200grad 250grad,
      #f7941e 250grad 300grad,
      #662a6c 300grad 350grad,
      #9a1d34 350grad 400grad,
      #43a1cd 100grad 150grad,
      #ba3e2e
    );
}

JavaScript

Диалоговое окно открывается в модальном режиме с помощью метода .showModal() и закрывается с помощью метода .close().

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

Результаты

• :fullscreen псевдокласс
• <dialog> HTML элемент
• API полноэкранного режима
• popover HTML глобальный атрибут
• API всплывающего окна