Innholdsfortegnelse:
Video: Trabajar en el extranjero 2024
Både HTML5 og JavaScript gjør det mulig å vise dialogbokser i CSS3. For eksempel kan du se en kombinasjon av en HTML5 / CSS3 dialogboks som ikke krever bruk av JavaScript ved Code Project.
Ved å legge til JavaScript betyr at du har øyeblikkelig tilgang til varslingen (), bekreft () og prompt () for begrenset direkte dialogboksvisning. Du har også all funksjonalitet som JavaScript kan gi for å skape virkelig fantastiske tilpassede dialogbokser.
Problemet med alle disse tilnærmingene er at du må skrive en betydelig mengde kode for å oppnå ønsket resultat. På den annen side gjør det mulig å lage disse dialogbokser uten mye koding i det hele tatt:
-
Grunnleggende
-
Animert
-
Modal
-
Modal med bekreftelse
-
Modal form
-
Modal meldingen
I tillegg gir selv en grunnleggende jQuery UI-dialogboks bedre funksjonalitet enn JavaScript-varsel () -funksjonen. Du kan flytte dialogboksen rundt, endre størrelsen på den og lukke den ved å bruke X i øverste høyre hjørne. Teksten kan også innredes på ulike måter fordi den bruker standard HTML-inngang.
Følgende eksempel begynner med å lage en intern stil som skal brukes til å dekorere teksten. (Du finner fullstendig kode for dette eksemplet i kapittel 06Widgets-mappen for den nedlastbare koden som dialogboksen. HTML.)
. Normal {font-family: Arial, Helvetica, sans-serif; farge: SaddleBrown; bakgrunnsfarge: Bisque;}. Legg vekt på {farge: Maroon; font-style: kursiv; fontstørrelse: større;}
Denne koden gir noen enkle endringer i teksten - akkurat nok slik at du kan se tilpassede CSS på jobben. Følgende kode lager dialogboksen på skjermen automatisk når du laster inn siden.
Opprette en enkel dialogboks
Dette er noen interessant tekst for dialogboksen!
$ ("# DialogContent"). dialog ();
Dialogboksen krever to elementer - en beholder, for eksempel a, for å holde bildeteksten i tittelattributtet og et tekstelement, for eksempel en
, for å holde innholdet. Legg merke til at avsnittet tekst inneholder en i dette tilfellet for å legge vekt på ordet interessant. Du kan formatere innholdet på noe som helst måte uten å endre samtalen til jQuery UI i det hele tatt.
Skriptet bruker en idvelger for å få tilgang til. Det gjør så en enkel samtale til dialog () for å vise dialogboksen på skjermen. Legg merke til at det gir et behagelig utseende, og det inneholder formatert innhold, i motsetning til alarmen () -funksjonen, som gir en stram, kvadratisk dialogboks som mangler formatering.
