Hvordan lage Pop-Ups i Javascript

April 21  by Eliza

Javascript gir tilgang til tre typer dialogbokser: alert (), bekrefte (), og spør (). Du kan gjøre flere ting med pop-ups. For eksempel kan du gjøre informasjonen vises på flere linjer i disse dialogboksene. Du kan også gå utover disse tre grunnleggende dialogboksene ved å skape dialogbokser av din egen.

Hvordan kontrollere linjeskift i Java

Noen ganger må du dele innhold på flere linjer. For å utføre denne oppgaven, legger du en flukt karakter til strengen. En flukt karakter er et spesielt signal til Javascript for å utføre noen spesiell behandling på en snor. Det er faktisk to tegn, backslash (\) etterfulgt av en annen karakter. Her er en liste over de omgåelsestegn at Java forstår:

  • \ ': Enkelt sitat
  • \ ": Double quote
  • \\: Backslash
  • \ N: ny linje
  • \ R: linjeskift
  • \ T: tab
  • \ B: backspace
  • \ F: arkmating

Du kan legge til disse escape-tegn i strenger å utføre spesielle oppgaver, for eksempel å vise innhold på flere linjer. Følgende eksempel viser hvordan du utfører denne oppgaven.

<Input id = "btnShow"
type = "button"
value = "vise dialogboksen"
onclick = "alert ('Dette er en veldig lang melding,' +
'\ R \ NSO du trenger å dele den på flere "+
'linjer'); "/>

Hvis du var å vise denne meldingen, uten rømnings tegn, ville det vise som en eneste lang linje. Dessverre, kan en eneste lang linje fungerer ikke på enkelte enheter, og det vil vises uhåndterlig på de fleste andre. Koden legger en \ r (linjeskift), som flytter markøren tilbake til begynnelsen av linjen, og en \ n (linjeskift), som plasserer markøren på neste linje.

Som en konsekvens av dette, vises utgangen fra varsling () på to linjer.

Hvordan lage Pop-Ups i Javascript

Hvordan du oppretter en modal dialogboks i Javascript

De tre dialogbokser som Javascript gir som standard er nyttig, men de er ikke alt som en typisk utbygger krever å skape en robust søknad. Det er tider når du trenger en tilpasset dialogboks for å fokusere brukerens oppmerksomhet på et spesifikt behov eller krav.

Du kan finne en rekke metoder for å lage en egendefinert dialogboks nettet, noen som er avhengige av spesielle biblioteker og produsere noen blendende resultater. Eksemplet bygger på overlay-metoden - en enkel teknikk for å lage en brukbar dialogboksen. Følgende kode viser hvordan du oppretter et overlegg å bruke en <div> som en del av siden din.

<Div id = "Overlay">
<Div>
<P id = "DlgContent"> Innhold Goes Here </ p>
<input id = "btnYes"
type = "button"
value = "Ja"
onclick = "DlgHide ('Ja')" />
<Input id = "btnNo"
type = "button"
value = "Nei"
onclick = "DlgHide (nei)" />
</ Div>
</ Div>

Disse kodene produsere en dialogboks som inneholder en melding og to knapper merket Ja og Nei. Du må endre meldingen, men har mulighet til å endre på knappene etter behov. For den saks skyld, trenger du ikke holde deg til bare to knapper - du kan endre overlegg for å møte eventuelle formaterings krav som trengs. Overlegget kan også ha en rekke innganger ønsket.

Kort sagt, dette er en forenkling som du kan utvide ganske lett å møte ethvert behov.

Å ha bare kodene ville bety at betrakteren kan se overlegget til enhver tid. I tillegg vil det være noe å skille overlegget fra den vanlige informasjonen på skjermen. Med dette i tankene, må du opprette noen CSS for å skille overlegget og å holde det skjult inntil nødvendig. Her er én måte å nærme seg oppgaven:

#Overlay
{
synlighet: skjult;
position: absolute;
venstre: 90px;
top: 120px;
width: 200px;
høyde: 90px;
text-align: center;
border: solid;
background-color: lightgray;
}

Som med overlegg koder, er CSS fullt konfigurerbart bruker Javascript-kode. For eksempel kan du legge til kode for å sentrere overlegg ved å endre venstre og øverste verdier. Eksempelet holder ting enkelt, men det er viktig å innse at alle disse verdiene er fullt konfigurerbar.

Dialogboksen vises når en bruker klikker på en knapp. Å gjøre det skje, trenger du en onclick hendelseshåndterer. Følgende kode utfører grunnleggende oppgaver som kreves for å samhandle med dialogboksen:

funksjon DlgShow (Message)
{
// Endre meldingen.
Var Msg = document.getElementById ("DlgContent");
Msg.innerHTML = Message;

// Viser dialogboksen.
Var DLG = document.getElementById ("Overlay");
Dlg.style.visibility = "synlig";
}

Eksempelet gir en konfigurerbar meldingen, som er gått til DlgShow () gjennom Message. Alt du trenger å gjøre er å endre Msg.innerHTML verdi for å endre meldingen. Dialogboksen vises når koden endrer synlighet eiendommens verdi til "synlig".

Nå som dialogboksen er synlig, trenger du en måte å gjøre det gå unna igjen. Når brukeren klikker enten Ja eller Nei, knappene ringe DlgHide () med en passende resultat. Følgende kode viser teknikk som brukes til å lage dialogboksen forsvinne:

funksjon DlgHide (resultater)
{
// Vise resultatet på skjermen.
Var Output = document.getElementById ("Resultat");
Output.innerHTML = "Du klikket:" + Resultat;

// Hide dialogboksen.
Var DLG = document.getElementById ("Overlay");
Dlg.style.visibility = "skjult";
}

I dette tilfellet Programmet viser også resultatet på skjermen. Du kan returnere verdien for videre behandling om ønskelig.

Hvordan lage Pop-Ups i Javascript