it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Creazione di una finestra modale facilmente con la finestra di dialogo HTML5

La finestra modale è una delle interfacce utente più comuni che possiamo trovare nei siti web. Viene comunemente utilizzato per trasportare un modulo di iscrizione, caricare moduli (come quello in WordPress), visualizzare notifiche e altri modi per attirare l'attenzione di un visitatore su qualcosa di importante.

Per tutto questo tempo, utilizziamo plugin jQuery come jQuery UI Dialog, Twitter Bootstrap Modal o Popeasy per crearne uno. Ma HTML5 ha introdotto un nuovo tag chiamato

questo ci permette di creare una finestra modale nativa in un modo molto più semplice.

Utilizzando l'elemento della finestra di dialogo

Usando il

elemento è lo stesso di come usiamo altri elementi HTML. Semplicemente aggiungiamo il contenuto che vogliamo visualizzare nella finestra di dialogo, in questo modo.

Ciao mondo!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, inventore!

Ma tieni presente che quando lo visualizzi in Chrome (che è l'unico browser che supporta questo tag al momento) la finestra di dialogo è nascosta. E data la struttura HTML di cui sopra, vedremo solo il pulsante Show Dialog. Per mostrare la finestra di dialogo possiamo usare la sua API JavaScript .show(), e usare .close() per nasconderla.

 (function () {var dialog = document.getElementById ('window'); document.getElementById ('show'). onclick = function () {dialog.show ();}; document.getElementById ('exit'). onclick = function () {dialog.close ();};}) (); 

Fare clic sul pulsante "Mostra finestra di dialogo" e la finestra di dialogo verrà visualizzata al centro della finestra del browser.

Possiamo personalizzare la finestra di dialogo tramite CSS. Per impostazione predefinita, la finestra di dialogo copre l'intero spazio orizzontale nel browser. Quindi, specifichiamo la larghezza, in questo modo.

 dialog {width: 500px; } 

Inoltre,

l'elemento viene fornito con un nuovo pseudo-elemento chiamato ::backdrop . È usato per dare forma a quel tipico sfondo fioco che normalmente troviamo dietro una finestra di dialogo. Permette ai visitatori di concentrarsi maggiormente sulla finestra di dialogo e nascondere tutto il resto. Al momento non sembra funzionare, ma sarà supportato in futuro.

Conclusione

L'HTML si è evoluto così tanto negli ultimi due anni. Non è più solo per la costruzione di pagine Web, ma possiamo anche costruire un'interfaccia utente interattiva con nuovi elementi HTML come

insieme all'API JavaScript. Tieni presente che questo elemento è sperimentale, non è ancora pronto per la produzione e funziona solo in Chrome con le Funzionalità sperimentali abilitate dalla pagina delle chrome://flags .

  • Visualizza la demo
  • Scarica fonte

15 consigli per ottenere di più da Dropbox

15 consigli per ottenere di più da Dropbox

Ho pensato spesso a Dropbox come un semplice servizio di cloud storage che puoi utilizzare per salvare e condividere file e cartelle . Ma quando ho iniziato a scavare più a fondo nelle sue funzionalità, non mi sono trovato che sbagliato. Questo servizio cloud è così pieno di sorprese e ha molte più funzionalità di quelle che già conosci .Dropbo

(Consigli tecnici e di design)

10 app per collegare il computer ai dispositivi Android

10 app per collegare il computer ai dispositivi Android

In un'epoca di connettività, passiamo dallo smartphone al tablet al computer più volte al giorno per una moltitudine di motivi : contattare qualcuno, giocare o apportare modifiche su Photoshop. Ci sono volte però quando hai voglia di avere più controllo su un dispositivo mobile, tutto dal tuo computer. Es

(Consigli tecnici e di design)