Hoi ido e.a.,
Waar ik me een beetje over verbaas, is dat niemand hierboven ingaat op eerder aangedragen suggesties:
- Cyberjunkie in nr. #3 gaat niet in op mijn suggesties van nr. #2, maar komt met iets anders.
- tiran818 in nr. #5 komt met code, en geeft geen verband aan met nr. #2 of nr. #3.
- CaptainBri komt ook met code, en geeft geen verband aan met nr. #2, nr. 3 of nr. #5.
Moet ik daaruit begrijpen dat iedereen de voorafgaande tips niet goed vindt?
Als ik moet stemmen, ga ik voor de oplossing van CaptainBri; ik zal zo vertellen waarom.
Maar met alle codes kan ik niet achterblijven.
Dit is de uitwerking van de stappen 1 t/m 8 uit nr. #2:
HTML:
<div id="more"><button onclick="showPopup()">Meer...</button>
<div id="popupVenster">
<div id="close"><button onclick="closePopup()">Sluit</button></div>
<h2>Dit is de titel van de popup</h2>
<p>Dit is de tekst van de popup.<br />
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,
id est laborum et dolorum fuga.</p>
</div>
</div>
Met als css:
Code:
#more {
position: relative;
}
#popupVenster{
position: absolute;
left: -9999px;
top: 0;
width: 500px;
background: #FFFDF5;
border: 1px solid #8080FF;
border-radius: 6px;
padding:15px;
}
#close{
text-align: right;
}
h2 {
margin: -1em 0 0 0;
padding: 0;
font-size: 1.2em;
}
Dat ziet er dan zo uit:
spoiler-csshunter.htm
Nu de verschillen en overeenkomsten.
Bij de code van tiran818 en van CaptainBri heb ik wat rest van de pagina neergezet, zodat je meer het totaal kunt bekijken.
Dat ziet er dan zo uit:
spoiler-tiran.htm, en zo:
spoiler-captainbri.htm
1. De tiran-oplossing
Als je op de link klikt (link of button maakt hier niets uit), zie je meteen wat er gebeurt: de hele rest van de pagina schuift op. Oorzaak: de popup heeft een relatieve positie t.o.v. de rest van de pagina.
Ook staat de popup standaard uit met {display:none} (en wordt aangezet met {display:block}). Dat betekent dat sommige speciale (tekst- of voorlees-) browsers, die geen javascript hebben, doen alsof de hele popup niet bestaat - en deze is dan op geen enkele manier te zien/horen. Er is ook het risico dat Google niet de woorden uit de popup wil zien, zodat deze niet meedoen als trefwoorden c.q. voor de rating.
M'n conclusie: zou ik niet gebruiken.
2. De CaptainBri-oplossing
Deze is in wezen gelijk aan mijn variant, alleen in een iets andere uitvoering. De popup heeft een absolute positie, en komt over alles heen zoals het een popup betaamt. Het aan/uit wordt gedaan met de
visibility in plaats van opschuiving naar buiten beeld: dat kan ook. Het javascript is wat anders gemaakt, maar komt op hetzelfde neer (voor de pedagogiek had ik er twee functies van gemaakt). En de positie is niet op gelijke hoogte en naast de button, maar is midden op de pagina gezet: dat kan ook. Verder zit er een klein html-foutje in: een button mag niet los in de <body> staan, maar moet altijd in een <div> of een <p> enz. zitten.
- Voor de huidige toepassing is de "binnen-div" overbodig: de opmaak daarvan kan ook rechtstreeks via de <div id="overlay"> plaatsvinden, dat geeft een identiek resultaat (zie: spoiler-captainbri2.htm).
- Als je de rest onder de pupop wilt verduisteren met een semi-transparante overlay (zolang als de popup aan staat), dan is een extra div weer wel nodig: om 100% bij 100% van het window af te dekken (zie de link van CaptainBri).
M'n conclusie: prachtig!
3. De CSShunter-oplossing
Dus analoog aan die van CaptainBri.
Een verschil met beide anderen is dat ik het javascript helemaal onderaan, vlak voor de </body></html> heb gezet volgens de vuistregel
"CSS in the head, Javascript at the bottom" (zie:
Best Practices for Speeding Up Your Web Site).
Manco van alle drie
Allemaal hebben ze echter nog hetzelfde nadeel voor de toegankelijkheid: als javascript uit staat (of als een browser geen javascript heeft), dan verschijnen wel de buttons, maar het klikken er op werkt niet. Niets te zien van de popup!
Dat valt te ondervangen door de pagina op te zetten via het principe van "
gelaagd bouwen", met zogenaamd
unobtrusive (niet in de weg staand) javascript. Dit komt er kortweg op neer dat alle javascript-functies er met javascript zelf in worden gezet (en no-script onderdelen er met javascript uit worden gehaald, als ze niet nodig zijn).
Het javascript wordt dan wel wat ingewikkelder.
Dan wordt het zoiets als deze:
spoiler-csshunter2.htm
Zie broncode voor het gebruikte javascript.
- Als javascript aan staat, verschijnt en verdwijnt de popup gewoon (geen verschil met andere versie).
- Als javascript uit staat, zijn er geen buttons en is de popup-tekst altijd zichtbaar + link om de popup over te slaan bij het lezen (of laten voorlezen door een voorleesbrowser).
- Als javascript uit staat en ook css is uitgeschakeld (of niet aanwezig is), dan is alle informatie nog steeds beschikbaar (met ook de link om de popup over te slaan).
Met vriendelijke groet,
CSShunter
__________
PS: Of het een
spoiler of een
modal window heet, wil ik afwezen; ik noem het een
css-popup. :d
PS-2: Als je een aantal
id's omzet in
classes, en een nummering toevoegt (ook in de javascript-functie), dan kunnen er verschillende popup-venstertjes komen op dezelfde pagina, zonder dat alles herhaald hoeft te worden.
