On my webpage I have this link:
<\a onclick="#" class="compose"></a>
By clicking the link, this script gets activated:
$(function(){
$('.compose').click(function() { // Button which will activate our modal
$('#popup_bestanden_edit_name').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
The script above will make this DIV visible, wich is a popup:
<div id="popup_bestanden_edit_name">
<div id="popupheading">
Naam wijzigen
</div>
<div id="popupcontent">
<p><form action="" method="post" name="naamwijzigen"><input name="naam" type="text"></form></p>
<a href="#" class="popupbutton green close"><img src="<?php echo $domein.'/images/confirm_popup/tick.png'; ?>">Ja, wijzigen</a>
<a href="#" class="popupbutton red close"><img src="<?php echo $domein.'/images/confirm_popup/cross.png'; ?>">Nee, annuleren</a>
</div>
The popup that opens gives people the opportunity to edit a name of a document on the website. So when the link <\a onclick="#" class="compose"></a>
is clicked, it has to send an id ($fetch_row['id']
) to the popup, so I can use this in the further scripting.
Does anyone know how to do this?
jQuery reveal plugin has many callback functions in which opened
callback function that triggers 'after' the modal is opened. See docs at foundation.zurb.com
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
Your id will set in myid
element in popup get this from here.
Add the id to your a tag like this
<a onclick="#" class="compose" data-id="<?php echo $fetch_row['id']?>"></a>
Then fetch the id and send it to your popup with Jquery:
id = $(this).attr("data-id");
Now use this id wherever you want.
add id to the anchor tag only i.e
<a id = '2' class='compose' ></a>
then you can get it like jQuery('.compose').attr('id');
now everything is working i have one more question. This is the code i use now:
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
But when the link is clicked while people are on the bottom of the page, the popup will open on the top of the page. But people need to scroll back to the top to see this.
How can i automatically send the user back to the top where the popup is being showed?