pop-up sluiten vanuit een andere pagina

[stuur]

Hallo,

In een pop-up wordt kort informatie gegeven.

Aanroepen van de pop-up:

<script type="text/javascript">	
		function info(url) {
			window.open(url,'info', 'toolbar=no, location=no, directory=no, status=no,scrollbars=yes, width=400, height=300, left=1100')	}
</script>

In het info-window wordt verwezen naar een nadere uitleg:

Echo “info”;
Echo “Voor uitgebreide uitleg zie <a href=’uitleg.php’>hier</a>”;
Echo “<a href=\"javascript:window.close()\">Sluiten</a>”;

Dit werkt op zich, maar het pop-up venster blijft open als men naar uitleg.php gaat.

Hoe kan ik er voor zorgen dat het pop-up window automatisch gesloten wordt als iemand inmiddels in uitleg.php zit?

 

[csshunter]

Hoi stuur,
Je zou het met een css-popup kunnen doen, dan is helemaal geen javascript nodig en blijft de popup op de oude pagina staan: zodat er niets geopend en niets gesloten hoeft te worden. Je hoeft dan tevens geen complete mini-pagina aan te maken voor het ene verwijszinnetje.

• Naar smaak kan je de popup laten verschijnen (met javascript) als er ergens op geklikt wordt, maar het kan ook (zonder javascript) als er alleen gehoverd wordt: dan hoeft de bezoeker niet eerst te klikken voor de popup.

Met vriendelijke groet,
CSShunter

 

[stuur]

Bedankt voor de reactie.
Deze mogelijkheid kende ik nog niet. Ik heb het gegoogled.
Breidt mijn arsenaal weer uit, al lost het nog niet alles op.
Maar ik kan weer verder.

 

[csshunter]

Hoi stuur,

... al lost het nog niet alles op.

Daar word ik heel er nieuwsgierig van.
Wat is er nog niet opgelost?

Met vriendelijke groet,
CSShunter

 

[stuur]

Het vcanuit de popup doorklikken nar een uitgebreide informatievraag.

 

[csshunter]

Hoi stuur,

• Een mogelijkheid kan bv. deze zijn: css-js-popups-met-links.php
  Getest in Firefox, Chrome, Opera, Safari en IE7.
  Valid xhtlm1.0-strict, valid css, en komt met 47/47 score door de (strenge) Quickscan Webrichtlijnen.

Toelichting:

• De popup-links vallen op door 4 dingen die afwijken van de gewone links: andere kleur, andere font-style (cursief), onderstippeling ipv onderstreping, en bij hoveren een Help-vraagtekentje ipv een handje.
• Bij de popup-links worden de normale tooltips, die maar een paar tellen blijven staan (via het title="Klik voor toelichting" attribuut), overgenomen door css-hovers die blijven staan zolang men hovert over de popup-link.
• Bij een klik wordt de tekst van de popup-link gehighlight, zodat men in één oogopslag ziet bij welke popup-link men de toelichting heeft opgevraagd. De cursor verandert in een handje, zodat men weet dat er op nogmaals op geklikt kan worden.
• Een popup-box is op 3 manieren weer te sluiten:
  (1) Door herhaald klikken op de popup-link (dit is een aan/uit-omschakelaar die snel te bedienen is als men de muis niet verplaatst),
  (2) door een Sluit-knopje op het popup-venstertje, en
  (3) automatisch als op een andere popup-link wordt geklikt.
• Een popup-box staat altijd een klein stukje onder de bijbehorende popup-link, en schuift mee omhoog of omlaag bij scrollen.
• Er kunnen zoveel links in een popbox komen als je wilt (zie de .JS-popup).
• Na bezoek aan een andere pagina in een ander tabblad staat bij terugkomst de popbox nog geopend, zodat men ziet waar men vandaan kwam.
• Zoveel mogelijk toebehoren bij de popup-links en popup-boxen worden er automatisch door javascript in gezet, zodat de html overzichtelijk blijft. Bv.: het automatisch in een nieuw tabblad laten openen van alle links binnen de popup-boxen; het aanbrengen van het "Sluit"-knopje, enz.
• Het is "unobtrusive javascript": staat niet in de weg voor de toegankelijkheid van de pagina. Als javascript uit staat, komen de toelichtingen als voetnoten onderaan de pagina te staan. Ze worden dan bereikt via de bladwijzer-functie van de popup-link. De teksten en de links in de popup-boxen zijn ook waarneembaar voor pure tekstbrowsers, voorleesbrowsers en de Google-bot.
• Met css is de popup-box precies zo op te maken als je wilt.
• NB: Het javascript moet ingevoegd worden op het eind van de html, vlak voor de </body></html>.

In de html komt voor een popup-link alleen te staan:

<a href="#popbox-1" class="popme" title="toelichting HTML" onclick="return togglePop(1)">HTML</a>

Alle popboxen met de inhoud van de popups komen steeds op dezelfde manier in een rijtje onderaan de pagina, bv.:

<div id="popbox-1" class="popbox">
	<p><strong>HTML</strong> is de afkorting van 
	<strong>H</strong>yper<strong> T</strong>ext<strong> M</strong>arkup<strong> L</strong>anguage.<br />
	Dit is de taal waarmee de structuur van internetpagina's wordt beschreven.</p>
	<p>Meer info?<br />
	De HTML-specificatie staat <a href="http://www.w3.org/TR/html401/">hier</a>!</p>
</div>

Voor verdere toelichting: zie de broncode en het popupbox-script.js

In wezen is het eigenlijk gewoon een simpel show/hide javascript.
Verder maken de kleren de keizer: de css doet de rest (en het javascript volgt weer de css).

Met vriendelijke groet,
CSShunter

 

[stuur]

Bedankt voor de uitgebreide toelichting. Hier kan ik zeker wat mee!