问题
I am trying to figure out a silly thing to work for couple of hours,but doesnt seem to be working.I got the Foundation 5 modal alert window working from my javascript.I have to prevent a delete operation if the user clicks on the Cancel button(On the alert) and do the delete if they click on the Ok or the cross(X) icon to the right. Here is my mark up and javascript for that
<div class="reveal-modal small" id="firstModal" data-reveal>
<p>Are you sure?</p>
<a href="#" class="close-reveal-modal" id="alert-close">×</a>
<a href="#" class="button alert" id="alert-cancel">Cancel</a>
<a href="#" class="button alert" id="alert-ok">Ok</a>
</div>
and Javascript
$('#firstModal').foundation('reveal', 'open');
I tried adding a callback after the 'open' but doesnt seem to working.Also tried catching the Cancel/Ok buttons click event using jQuery.None of them works.Now the data gets deleted ,no matter which button the user chooses Edit: I have tried something like this,but not working oout well
$('#firstModal').foundation('reveal', 'open', function (value) {
if (value) {
modifySelectList(id, currentDefaultId);
}
else {
$('#firstModal').foundation('reveal', 'close');
}
});
Please help Thanks in Advance
回答1:
I got this to working by adding the following code(I removed the close (X) button to the top right corner(MIght be helpful for someone like me)
function revealModal(callBack) {
$('[data-reveal]').foundation('reveal', 'open', {});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
//Handle Ok click
$('#alert-ok').click(function () {
callBack.call(options);
$('[data-reveal]').foundation('reveal', 'close');
})
//Handle Cancel click
$('#alert-cancel').click(function (event) {
//Your logic here
$('[data-reveal]').foundation('reveal', 'close');
})
})
}
function callBack(options){
//Yor application logic
}
来源:https://stackoverflow.com/questions/24421266/adding-logic-on-the-cancel-ok-modal-popup-window-click-foundation-5-modal