Adding logic on the Cancel/Ok modal popup window click,Foundation 5 Modal

瘦欲@ 提交于 2019-12-25 04:24:57

问题


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">&times;</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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!