[JS] Meerdere pop-ups
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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
}
}
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:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<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!
Gewijzigd op 01/01/1970 01:00:00 door [email protected]
Code (php)
1
2
3
4
2
3
4
function darker (id) {
if(document.getElementById(id).style.display == "block"){
.... enz
}
if(document.getElementById(id).style.display == "block"){
.... enz
}
Je hyperlink komt er dan zo uit te zien:
Wat jij bedoelt is dat in mijn JS bestand het volgende moet doen;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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
}
}
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;
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
<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.
Gewijzigd op 01/01/1970 01:00:00 door [email protected]
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.
Zou iemand eventueel een voorbeeldje kunnen plaatsen?
Wat ik heb:
Code (php)
1
2
3
4
2
3
4
<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>
<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>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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
}
}
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
Gewijzigd op 01/01/1970 01:00:00 door [email protected]
Problemó solved. 2 verschillende functies gemaakt.