novicen.dk - JavaScript pop-up bokse

Administreres af:

Pop-up bokse Tilbage til oversigtstabel
Tilbage

Af: novicen.dk

Pop-up bokse

Der findes i JavaScript kun tre forskellige pop-up boks typer: alert(), confirm() og prompt(). De giver hver deres oplysninger og hver deres muligheder.

Alert-boksen kan angive en besked til brugeren og giver kun mulighed for at svare Ok. Eksempelvis kan brugeren ved en onLoad-hændelse få oplysninger om, at din hjemmeside er designet til at kunne fungere i både Netscape og Explorer browsere. Nøjagtig, som du så det, da du kom ind på denne side. onLoad-hændelsen kan indsættes i BODY TAG'en og den er i indeværende demonstraiton sat til at kalde funktionen popupAlert(), hvorfra selve alert-boksen bliver aktiveret. I praksis kunne alert-boksen have været effektueret direkte fra onLoad-hændelsen men det giver en mindre overskuelig kode.

<body bgcolor="#ffeedd" text="#8d4007" onload="popupAlert()">

<script type="text/javascript"><!--
function popupAlert() {
alert('Denne hjemmeside kan ses i \n\n\tNetscape og \n\tExplorer \n\nbrowsere :-)')
}
// -->
</script>

Se eksempel igen

For alle typer pop-up bokse gælder det, at den tekst, som de skal vise, skal indsættes i anførselstegn og at der kan foretages linieskift ved at bruge escape-karakteren \n. Tilsvarende kan der laves tabulering med \t.

Confirm-boksen gør det muligt for brugeren, at foretage et konkret valg. Resultatet af brugerens valg returneres som enten true (sand) eller false (falsk). Dette kan anvendes til at skifte indhold af visningen afhængigt af, hvad brugeren vælger.

Se eksempel

<script type="text/javascript"><!--
function confirmAlert() {
  var valg = confirm('Tryk på enten Ok eller Annuller');
  if (valg) {
    alert('Du trykkede Ok..!');
    }
  else {
    alert('Du annullerede :-)');
    }
  }
// -->
</script>

Den anvendte if-betingelse udfører alert-boksen med indholdet 'Du trykkede Ok..!' såfremt betingelsen i den efterfølgende parantes registreres som sand - altså hvis brugeren trykker Ok. I modsat fald registreres værdien af brugerens valg som værende ikke-sand = falsk og dermed udføres den del, som står efter else-angivelsen.

Det er muligt at gemme resultatet af brugerens valg i en variabel. Her er variablen kaldet for "valg".

Som den sidste mulighed for pop-up boks er prompt-boksen. Denne giver brugeren mulighed for at indtaste data til brug på hjemmesiden.

Se eksempel

<script type="text/javascript"><!--
function promptAlert() {
  var navn = prompt('Indskriv dit navn i feltet herunder','Dit_navn_her');
  if (navn!=null && navn!="") {
    alert('Du angav dit navn til at være:\n\n' +navn);
    }
  else {
    alert('Du indtastede ikke noget navn');
    }
  }
// -->
</script>

Som du kan se, er der her mulighed for at angive både en besked til brugeren og vise et eksempel på, hvordan det kunne se ud. Der er ikke nødvendigt at udfylde den del, der angiver eksemplet - det er blot en mulighed.

I if-betingelsen testes der både på, om brugeren har trykket på Annuller (navn!=null) og på, om brugeren har fjernet det, som allerede stod angivet som eksempel (navn!="") - altså en tom tekststreng.

Til top