Autor publikacji
Virtual Patriot - Administrator

dialog

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu dialog

Element dialog reprezentuje okno dialogowe, którego głównym przeznaczeniem jest umożliwienie komunikacji pomiędzy użytkownikiem, a aplikacją internetową, do której należy dany element dialog.

Zawartością elementu dialog może być treść, która skłania użytkownika do określonego działania w obrębie danej aplikacji internetowej.

Dodatkowe artykuły związane z elementem dialog

brak

Informacje techniczne o elemencie dialog

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<main>
  <dialog>
    <h1>Wybór koloru</h1>
    <p>Wybierz interesujący Cię kolor.</p>
    <label>Twój kolor: <input type="color"></label>
  </dialog>
</main>

Kontekstem zewnętrznym przykładowego elementu "dialog" jest element "main". Wspomniany element "main" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "main", jest prawidłowym kontekstem zewnętrznym dla elementu "dialog".

kontekst wewnętrzny

zawartość opływająca

Przykładowy Kod HTML

<main>
  <dialog>
    <h1>Wybór koloru</h1>
    <p>Wybierz interesujący Cię kolor.</p>
    <label>Twój kolor: <input type="color"></label>
  </dialog>
</main>

Kontekstem wewnętrznym przykładowego elementu "dialog" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h1", element "p" oraz element "label", jest prawidłowym kontekstem wewnętrznym dla elementu "dialog".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<dialog> ... </dialog>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

  • none (jeżeli przeglądarka internetowa interpretuje element dialog oraz jeżeli element dialog nie posiada atrybutu open)

  • block (jeżeli przeglądarka internetowa interpretuje element dialog oraz jeżeli element dialog posiada atrybut open)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu dialog)

Przypuszczalnie domyślne reguły CSS elementu dialog

/* wszystkie reguły CSS, jeżeli przeglądarka internetowa interpretuje element "dialog" */

dialog {
  display:none;
  position:absolute;
  background-color:white;
  color:black;
  padding:1em;
  border-width:3px;
  border-style:solid;
}

dialog[open] {
  display:block;
}

Interpretacja elementu dialog

Firefox

tak

Google Chrome

tak

Safari

nie

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu dialog

Atrybut Lokalny

open

Przeznaczenie atrybutu open

Atrybut open wykorzystany wraz z elementem dialog pozwala nam określić czy dany element dialog domyślnie powinien być widoczny w oknie przeglądarki internetowej dla użytkownika.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu open

open

Atrybut open jest atrybutem logicznym elementu dialog.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <dialog open>
      <h1>Wybór koloru</h1>
      <p>Wybierz interesujący Cię kolor.</p>

      <form action="https://webkod.pl/php/submit-result.php">
        <label>
          Twój kolor:
          <input type="color" name="kolor">
        </label>

        <button type="submit">zatwierdź</button>
      </form>
    </dialog>

  </body>
</html>

Rezultat

Przykładowy element "dialog" domyślnie jest widoczny w oknie przeglądarki internetowej, ponieważ do wspomnianego elementu "dialog" został dodany atrybut "open".