Finestre modali con il tag HTML dialog

Sulle pagine del sito abbiamo scritto tantissimo su finestre modali di  tipi e come realizzarli. E oggi ancora una volta torniamo al argomento, perleremo di pop-up e finestre modali
Lo sviluppo del linguaggio html non si ferma mai. Ogni messe ci sono delle novità e proposte per inserire nel linguaggio e approvare per via definitiva novi elementi.
Oggi parleremo del tag <dialog> che in realtà non e nuovo ma comunque poco noto al pubblico particolarmente ai principianti

Elemento dialog di HTML e stato presentato in HTML 5.2 (2018) in maniera completa e definitiva, anche se le sue prime descrizioni sono stati scritte qualche anno prima,  tag dialog ci permette di creare direttamente nel codice di una pagina  finestre pop-up o modali.

<dialog open>
  <h1>Ciao</h1>
</dialog>

L'elemento dialog rappresenta:

Un elemento che è facile da visualizzare e nascondere, compreso l'attributo logico open  dell'elemento stesso.

Due versioni: popo-up standard o modale.

Pseudo-elemento ::backdrop  per il tipo modal.

Messa a fuoco integrata:

Interfaccia DOM con attributo open (sara aperto da subito  ) e metodi show, showModal e close  (usati solo in Javascript).

E questi sono solo alcuni momenti! La visualizzazione di contenuti sopra altri contenuti non è mai stata così semplice.

Per usare e mostrare finestra pop-up o finestra modale con questo tag dobbiamo usare anche Javascript. Proprio Javascript gestiste apparenza e chiusura della finestra. Il tag dialog semplicemente crea nel DOM  della pagina il blocco che vogliamo mostre e lo tiene nascosto finché non  parte comando da Javascript di mostrare il contenuto del tag

Vediamo come funziona

<dialog id="dialog">
  <h1>Ciao</h1>
</dialog>
<script>
  var dialog = document.getElementById('dialog');
  dialog.show();
</script>

 

Come avevi notato ci sono due metodi show e showModal

Uso showModal ()

 

La versione modale vine attivata usando il metodo, dialog.showModal (). e diversa dal semplice show per questi motivi:

Garantisse che la finestra sia posizionata sopra qualsiasi altro elemento, indipendentemente dal loro z-index.

Per stilizzare una finestra abbiamo  dialog::backdrop.

Si chiudi con il tasto Esc.

 <dialog id="dialog">
  <h1>Ciao</h1>
</dialog>
<script>
  var dialog = document.getElementById('dialog');
  dialog.showModal(); // "showModal" invece di  "show"
</script>

 

::backdrop

 

Per cambiare lo sfondo della finestra modale indicare dialog::backdrop E davvero comodo per il uso dello sfondo semitrasparente.

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

 

Forme interattive

 

Un nuovo attributo form, method = "dialog", può essere utilizzato negli elementi di dialog. Inserendo la nostra finestra modale nel form e specificando un attributo, possiamo collegarlo al attributo value del pulsante di invio .

<dialog id="dialog">
  <form method="dialog">
 <p>Would you like to continue?</p>
 <button type="submit" value="no">No</button>
 <button type="submit" value="yes">Yes</button>
  </form>
</dialog>
<script>
  var dialog = document.getElementById('dialog');
  dialog.showModal();
  dialog.addEventListener('close', function (event) {
 if (dialog.returnValue === 'yes') { /* ... */ }
  });
</script>

 

Posso usare?

Al momento  il supporto del browser per l'elemento  dialog è di circa  70%. Ma c'è speranza che questa percentuale aumenterà. L'implementazione in Firefox è quasi pronta. Potresti fare delle prove gia oggi in Google Chrom.

Letto 183 volte