JavaScript - öppna popup-fönster
I många av avsnitten i HTML-skolan kan du öppna en länk i ett nytt, litet fönster och detta åstadkommer jag med ett litet JavaScript. Det här fönstret är användbar till mycket: Du kan visa en bild, förklara någonting, lägga ett formulär i extrafönstret och mycket annat.
Det fiffiga med det här extrafönstret är att du mycket exakt kan bestämma både hur det skall se ut och var det skall öppnas.
Skriptet består av två delar: En funktion som definieras mellan HEAD-taggarna och en länk som anropar funktionen. Vi börjar med funktionen, som skall ligga mellan SCRIPT-taggar:
<SCRIPT language="JavaScript">
<!-- Göm skriptet
function nyRuta()
{
window.open('nysida.html','nyarutan','top=10,left=10,width=270,height=200,toolbar=no,¬¬
location=yes,status=no,menubar=yes,scrollbars=yes,resizable=yes');
}
// Sluta gömma -->
</SCRIPT>
Den röda haken ¬¬ betyder att allt skall stå på en enda rad utan mellanslag. I den långa raden som börjar med window.open anger du först adressen till html-sidan som skall öppnas i det nya fönstret, sedan namnet som fönstret får och därefter allt om hur fönstret skall se ut. Om du vill kan du byta yes och no mot 1 och 0.
Det här fönstret kommer att öppnas 10 pixlar från skärmens överkant och 10 pixlar från vänsterkanten. Det blir 270 pixlar brett och 200 pixlar högt. Det får ingen verktygsrad men däremot adressrad. Statusraden längst ned kommer inte att visas, men däremot menyraden. Det får rullningslister och besökaren kan ändra storleken på fönstret.
Om du vill öppna flera nya fönster från en och samma sida, bygger du på med fler funktioner som får egna namn, till exempel nyRuta2(), nyRuta3() och så vidare. För varje ny funktion anger du adressen till sidan som skall öppnas och egenskaperna för fönstret. Du kan placera alla funktionerna inom samma par av SCRIPT-taggar. Se dessutom till att varje länk (se nedan) anropar rätt funktion.
Det finns en mängd möjligheter att påverka utseendet på extrafönstret. Läs mer om detta i Handbok i JavaScript.
Men för att fönstret skall öppnas måste funktionen anropas. Det gör vi med hjälp av en länk, som ser ut så här:
<A HREF="javascript:nyRuta()">Den text som visas på sidan</A>
Den här länken lägger du på sidan precis som med vanliga länkar. När besökaren klickar på länken kommer funktionen nyRuta() att anropas och den öppnar det nya fönstret. I detta öppnas den html-sida som du i funktionen gav adressen till.
Om du har satt alla verktygsrader och menyrader till no eller 0, måste du ändå ge besökaren en möjlighet att stänga fönstret igen. Det gör du genom att lägga till en Stäng-knapp på den sida som skall öppnas. Koden till den ser ut så här:
<FORM
NAME="form">
<INPUT TYPE="button" VALUE="Stäng"
NAME="Ut" onClick="window.close()">
</FORM>
Gör några html-sidor som lämpar sig för att öppnas i nya småfönster. Skriv javascriptet till dem och lägg in det och länkarna på sidan som fönstren skall öppnas från. Kontrollera i webbläsaren att allt fungerar.
© SupportData.Net