Hvordan lage en tilpasset dialogboks i AJAX for HTML5 og CSS3 programmering - dummies

AJAX lar HTML5 og CSS3 programmerere lage egendefinerte dialogbokser. JavaScript leverer noen dialogbokser (alarmen og ledige dialogbokser), men disse er ganske stygg og relativt ufleksible. JQuery brukergrensesnittet inneholder en teknikk for å slå en div til en virtuell dialogboks. Dialogboksen følger temaet og er resizable og flyttbar.

Å bygge dialogboksen er ikke vanskelig, men du må kunne slå den på og av med kode, eller det vil ikke fungere som en riktig dialogboks (som etterligner et vindu i operasjonen system):

1. Opprett div du har tenkt å bruke som dialogboks.

   Opprett en div og gi den en ID slik at du kan slå den til en dialogboksknute. Legg til tittelattributtet, og tittelen vises i dialogboksens tittellinje.

   Dialoglassen lar deg ha en flyttbar, betydelig tilpasset dialogboks som stemmer overens med det installerte sidetemaet.
   

2. Slå div inn i en dialogboks.

   Bruk dialogboksen () -metoden til å aktivere diven i en jQuery-dialogboksenode i init () -funksjonen:

   $ ("# dialog"). dialog ();
   

3. Skjul dialogboksen som standard.

   Vanligvis vil du ikke ha dialogboksen synlig til noen form for hendelse skjer. I dette spesielle eksempelet vil du kanskje ikke at dialogboksen skal vises før brukeren klikker på en knapp. Du kan legge inn en kode for å lukke dialogboksen i init () -funksjonen, slik at dialogboksen ikke vises før den blir innkalt.

4. Lukk dialogboksen.

   For å lukke en dialogboks, se dialogboksen knutepunkt og ring dialogboksen () -metoden på den igjen. Denne gangen, send enverdien "lukk" som en parameter, og dialogboksen vil umiddelbart lukke:

   // lukk først dialog $ ("# dialog"). dialog ("close");
   

5. Når du klikker på X, lukkes dialogboksen automatisk.

   Dialogboksen har en liten X som ser ut som ikonet Lukk vindu i de fleste vindussystemer. Brukeren kan lukke dialogboksen ved å klikke på dette ikonet.

6. Du kan åpne og lukke dialogboksen med kode.

   Mine Åpne Dialog og Lukk Dialog knapper ringe funksjoner som styrer oppførselen til dialogboksen. Her er for eksempel funksjonen knyttet til Open Dialog-knappen:

   funksjon openDialog () {$ ("# dialog"). dialog ("åpen");} // end openDialog