Video: sez7/4 - Finestre pop-up 2024
AJAX consente ai programmatori HTML5 e CSS3 di creare finestre di dialogo personalizzate. JavaScript fornisce alcune finestre di dialogo (le finestre di avviso e prompt), ma sono abbastanza brutte e relativamente poco flessibili. L'interfaccia utente di jQuery include una tecnica per trasformare qualsiasi div in una finestra di dialogo virtuale. La finestra di dialogo segue il tema ed è ridimensionabile e mobile.
Costruire la finestra di dialogo non è difficile, ma è necessario essere in grado di accenderlo e spegnerlo con il codice, o non si comporterà come una finestra di dialogo appropriata (che imita una finestra nel funzionamento system):
-
Crea il div che intendi utilizzare come finestra di dialogo.
Creare un div e assegnargli un ID in modo da poterlo trasformare in un nodo della finestra di dialogo. Aggiungi l'attributo title e il titolo compare nella barra del titolo della finestra di dialogo.
La classe di dialogo ti permette di avere una finestra di dialogo personalizzabile, considerevole, compatibile con il tema della pagina installata.
-
Trasforma il div in una finestra di dialogo.
Usa il metodo dialog () per trasformare il div in un nodo della finestra di dialogo jQuery nella funzione init ():
$ ("# dialog"). dialogo(); -
Nascondi la finestra di dialogo per impostazione predefinita.
Di solito non si desidera visualizzare la finestra di dialogo finché non si verifica un qualche tipo di evento. In questo particolare esempio, è possibile che la finestra di dialogo non venga visualizzata finché l'utente non fa clic su un pulsante. È possibile inserire del codice per chiudere la finestra di dialogo nella funzione init () in modo che la finestra di dialogo non venga visualizzata fino a quando non viene richiamata.
-
Chiudi la finestra di dialogo.
Per chiudere una finestra di dialogo, fare riferimento al nodo della finestra di dialogo e richiamare nuovamente il metodo dialog (). Questa volta, invia il singolo valore "close" come parametro e la finestra di dialogo si chiuderà immediatamente:
// chiude inizialmente la finestra $ ("# dialog"). dialogo ("close"); -
Cliccando sulla X si chiude automaticamente la finestra di dialogo.
La finestra di dialogo ha una piccola X che assomiglia all'icona Chiudi finestra sulla maggior parte dei sistemi di finestre. L'utente può chiudere la finestra di dialogo facendo clic su questa icona.
-
È possibile aprire e chiudere la finestra di dialogo con il codice.
I pulsanti My Open Dialog e Close Dialog richiamano le funzioni che controllano il comportamento della finestra di dialogo. Ad esempio, ecco la funzione allegata al pulsante Apri finestra di dialogo:
function openDialog () {$ ("# dialog"). dialog ("open");} // end openDialog
