在“取消/确定"模态弹出窗口上添加逻辑，单击“基础5模态" [英] Adding logic on the Cancel/Ok modal popup window click,Foundation 5 Modal

问题描述

我试图找出一个愚蠢的东西可以工作几个小时，但似乎没有起作用.我从javascript中获得了Foundation 5模态警报窗口.如果用户单击，则必须防止删除操作单击取消"按钮(在警报上)，然后单击右侧的确定"或十字(X)图标进行删除. 这是我的标记和相应的javascript

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>

和Javascript

and Javascript

$('#firstModal').foundation('reveal', 'open'); 

我尝试在'open'之后添加回调，但似乎没有用.也尝试使用jQuery捕获Cancel/Ok按钮的click事件.它们都不起作用.现在无论用户选择哪个按钮，数据都将被删除 我已经尝试过类似的方法，但是效果不佳

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 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');
                    }

                });

请帮助 在此先感谢

推荐答案

我通过添加以下代码来使其工作(我删除了右上角的关闭(X)按钮(对像我这样的人有所帮助)

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
}

这篇关于在“取消/确定"模态弹出窗口上添加逻辑，单击“基础5模态"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！