[JS] Meerdere pop-ups

Door [email protected] op 09-11-2009 21:01

1.322 views

Geachte,

Ik heb zojuist een live-popup gemaakt, waarbij de gebruiker op een <input> klikt en er vervolgens 2 div's over alles verschijnen, de code is als volgt:

JavaScript:


function darker() {
if(document.getElementById('darker').style.display == "block"){
document.getElementById('darker').style.display = "none";
document.getElementById('popup').style.display = "none";
return
}else{
document.getElementById('darker').style.display = "block";
document.getElementById('popup').style.display = "block";
return
}
}

PHP:


<a href="javascript:darker()"><img src="_images/buttons/register.png" border="0" /></a>
						<div class="darker" id="darker">
    						<div class="popup" id="popup">
        					<?php include('_includes/register/join.php'); ?>
        					<div align="right"><a href="javascript:darker()"><img src="_images/close.png" border="0" /></a></div>
        					</div>
						</div>

CSS:
Niet van belang voor dit;

Dit alles werkt 100%
Het enige probleem is dat als ik 2 of meerdere van deze gebruik, live-popup's dan laad hij automatisch de eerste, iemand enig idee hoe ik dit kan fixen, zodat als ik 2 of meerdere link's naar 2 of meer verschillende popups heb dat hij het content laad bij de popup waar ik op klik, en niet het eerste.

Alvast bedankt!

- SanThe -

09-11-2009 21:05

Je script in je post is nu niet echt leesbaar. Pas je post even aan en gebruik [ignore]

en

[/ignore] tags om je code heen. Om php code zet je uiteraard dit:<?php en ?>Gebruik je

knop om dit te doen.

SanThe.

Jan Koehoorn

09-11-2009 21:05

De beste manier is, dat je het id van de juiste div als argument meegeeft aan je JavaScript functie:


function darker (id) {
    if(document.getElementById(id).style.display == "block"){
    .... enz
}

Je hyperlink komt er dan zo uit te zien:


<a href="javascript:darker('id_van_de_goeie_div')">

[email protected]

09-11-2009 21:13

@Jan,

Wat jij bedoelt is dat in mijn JS bestand het volgende moet doen;

function darker(id) {
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
document.getElementById(id).style.display = "none";
return
}else{
document.getElementById(id).style.display = "block";
document.getElementById(id').style.display = "block";
return
}
}

Dan in mijn html dit;

<a href="javascript:darker()"><img src="_images/buttons/register.png" border="0" /></a>
						<div class="darker" id="darker">
    						<div class="popup" id="popup">
        					<?php include('_includes/register/join.php'); ?>
        					<div align="right"><a href="javascript:darker()"><img src="_images/close.png" border="0" /></a></div>
        					</div>
						</div>

maar Wat moet op de plaats van javascript:darker(???)
Welk ID van welke DIV moet ik daar; ik include namelijk naar een bestand

Wat ik uiteindelijk wil bereiken is dit, 2 Javascript popups met beide verschillend content.

		<a href="javascript:darker()"><img src="_images/buttons/login.png" border="0" /></a>
						<div class="darker" id="darker">
    						<div class="popup" id="popup">
        					<?php include('_includes/login/login.php'); ?>
        					<div align="right"><a href="javascript:darker()"><img src="_images/close.png" border="0" /></a></div>
        					</div>
						</div>
        <a href="javascript:darker()"><img src="_images/buttons/register.png" border="0" /></a>
						<div class="darker" id="darker">
    						<div class="popup" id="popup">
        					<?php include('_includes/register/join.php'); ?>
        					<div align="right"><a href="javascript:darker()"><img src="_images/close.png" border="0" /></a></div>
        					</div>
						</div>

Thanks.

Jan Koehoorn

09-11-2009 22:27

De div die je donkerder maakt, is elke keer hetzelfde. Die hoef je dus niet als argument mee te geven. Wat je mee moet geven is de id van de div die als 'popup' fungeert.

[email protected]

10-11-2009 11:25

Tot heden ben ik nog niet tot een oplossing gekomen, ook niet met de hulp die jullie mij geboden hebben.

Zou iemand eventueel een voorbeeldje kunnen plaatsen?

Wat ik heb:


<td><a href="javascript:darker()"><img src="_images/buttons/login.png" border="0" /></a>
        	<div class="darker" id="darker1"><div class="popup" id="popup1">lol</div></div></td>
        <td><a href="javascript:darker()"><img src="_images/buttons/register.png" border="0" /></a>
        	<div class="darker" id="darker2"><div class="popup" id="popup2">LOL2</div></div></td>

function darker() {
if(document.getElementById('darker'+1,2).style.display == "block"){
document.getElementById('darker'+1,2).style.display = "none";
document.getElementById('popup'+1,2).style.display = "none";
return
}else{
document.getElementById('darker'+1,2).style.display = "block";
document.getElementById('popup'+1,2).style.display = "block";
return
}
}

Thanks :X

[email protected]

10-11-2009 14:40

Problemó solved. 2 verschillende functies gemaakt.

Reageren

Inloggen om te reageren