ik maak gebruik van het script Leanmodal - http://leanmodal.finelysliced.com.au/# en via een link "message" wordt de div "test" getoond. Dit werkt prima maar nu wil ik graag een variable meegeven naar die div "test". Wat is een gangbare methode. Binnen PHP weet ik hoe ik variabelen tussen PHP pagina's kan laten uitwisselen, maar voor 't onderstaande ben weet ik 't niet.
<a rel="leanModal" name="test" href="#test">
message
</a>
<div id="test">
<p>Lorem ipsum dolor sit amet.</p>
<a class="modal_close" href="#"></a>
</div>
Ik denk dat TS bedoelt de variabelen met PHP op te halen, en dan kan dat via AJAX:
[code lang="js"]
<a href="#" class="clickable" data-id="something">Bericht</a>
<script>
$(".clickable").on('click', function(e){
e.preventDefault;
$.ajax({
url: '/message.php',
type: 'POST',
dataType: 'html',
data: {'id': $(this).data('id')},
success: function(d){
$('#test').html(d);
$('#test').show();
}
});
});
</script>
[/code]
En dan in samenwerking met Franks css en id's, want die modal die je nu gebruikt wordt is wel heel erg simpel.
Dit komt voor 90% in de buurt van wat ik bedoel, echter wanneer ik href="nuchtere nico" verander in $id en $id vooraf een waarde geef, dan wordt er direct $1 geplaatst terwijl ik $id eerst in die div wil opvragen en vervolgens een query wil doen in de database (WHERE id = '$id')
Wat moet ik veranderen aan 't script om de variabele niet direct geplaatst te krijgen in de popup maar 'm als variable kan opvragen?
<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>Popup Window</title>
<style>
#blanket {
display: none;
background-color: #666;
opacity: 0.65;
filter: alpha(opacity=45);
position: absolute;
z-index: 9001;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#popUpDiv {
display: none;
position:fixed;
top: 50%;
left: 50%;
width:300px;
height:200px;
margin-left: -155px; /* zet deze waarde negatief op de helft van de width + border dikte */
margin-top: -105px; /* zet deze waarde negatief op de helft van de height + border dikte */
padding: 10px;
border: 10px solid orange;
background-color: white;
z-index:9002;
overflow: auto;
}
#popUpDiv img {
float:right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
function popup(text) {
$('p.popup').html(text);
$('#blanket').show();
$('#popUpDiv').show();
}
function popupClose() {
$('#blanket').hide();
$('#popUpDiv').hide();
}
$(function() {
$('.popup').click(function(e) {
popup($(this).attr('href'));
return false;
});
$('#popUpDiv img').click(function(e) {
popupClose();
return false;
});
});
</script>
</head>
<body>
<? $id = '1'; ?>
<a class="popup" href="$id"> show me my info</a>
<!-- popup window plaatsen, id ophalen en memberinfo tonen-->
<div style="display: none;" id="blanket"></div>
<div id="popUpDiv">
<img src="graphics/close.png" />
<p class="popup"></p>
</div>
</body>
</html>
Tuurlijk wil ik nadenken :-) maar snap 't process niet waarlangs een variable bekend gemaakt kan worden in die popup zodat ik er binnen die popup mee kan gaan werken.
Uit 't script van Frank blijkt dat de variable die via de url doorgegeven wordt binnen 't script wordt getoond middels popup($(this).attr('href'))?
Maar hoe zorg ik binnen die popup div de variabele beschikbaar krijg?
Door de logica in te zien, ik proberen die uit te leggen:
a)
Je hebt div waarin je bepaalde informatie afhankelijk van waarop geklikt wordt wilt tonen, heel simpel en zonder opmaak kan je dit doen:
[code lang="html"]
<div id="test" style="display:none;"><div>
[/code]
b)
Daarna ga je anchors maken vanuit je php:
c)
En dan met mijn eerder voorbeeld wordt aan elke <a> met de class clickable een onclick gegenereerd die de waarden ophaalt van wat in het data attribuut id staat.
