Pop-upvensters voor een breed scala aan doeleinden hebben veel toepassingen bij het bouwen van websites. Ze kunnen worden gebruikt om verschillende soorten menu's te maken, advertentieteksten en afbeeldingen te plaatsen, tooltips bij het invullen van complexe formulieren en het is handig om de formulieren zelf in vensters te plaatsen die geen ruimte op de pagina innemen. In ons artikel vind je een beschrijving hoe je zo'n raam kunt maken.
Het is nodig
Basiskennis HTML
instructies:
Stap 1
pop-up, html, verborgen laag
Stap 2
Op veel pagina's op het web kun je zien dat fraaie bibliotheken van verschillende JavaScript-frameworks (jQuery, MooTools, Prototype, etc.) worden gebruikt om pop-upvensters in de pagina's te maken. In feite zijn ze echter niet nodig bij het oplossen van dit specifieke probleem. De tools die beschikbaar zijn in Hypertext Markup Language (HTML) en Cascading Style Sheets (CSS) zijn voldoende om pop-ups te maken. De vensters die op deze manier zijn gemaakt, werken ongeacht of JavaScript is ingeschakeld in de browser van de bezoeker.
Alle code die de pop-up maakt, kan op twee regels worden geplaatst. De eerste regel creëert een link waarop moet worden geklikt om de pop-up weer te geven:
Klik hier!
Hier stelt het attribuut onmouseover van de link-tag het standaard muiscursortype in voor links. Het attribuut onclick geeft aan dat wanneer op de link wordt geklikt, het verborgen PopUp-blok zichtbaar moet worden.
De tweede regel is in feite het pop-upvenster. Laag met de PopUp-identificatie en de grootte van het venster, kleur en grootte van de tekst, achtergrond en rand gespecificeerd in het stijlkenmerk:
Dit is de tekst in de pop-up
Het is standaard niet zichtbaar - dit wordt aangegeven door de weergavekiezer met een waarde van geen in de laagstijlbeschrijving.
Dit is eigenlijk alles wat je nodig hebt om een pop-upvenster te maken - plaats deze twee regels tussen de tags en je pagina en het is klaar voor gebruik.
Stap 3
Om het pop-upvenster voor de tag te kunnen sluiten, moet u een link toevoegen die de tegenovergestelde actie uitvoert - de zichtbare laag verbergen met de PopUp-ID:
dichtbij
Stap 4
En als je wilt dat het venster niet verschijnt door te klikken, maar door de muiscursor te laten zweven, dan moet de eerste regel met de link op deze manier worden aangepast:
beweeg de muis hierheen!
Stap 5
U bent nu bekend met het principe en de structuur van de pop-upvenstercode, en het ontwerp van het uiterlijk en de inhoud hangt volledig af van uw doelen en verbeeldingskracht.
