Question

我试图找出一个愚蠢的事情，工作几个小时，但似乎没有工作。我得到了基础5模态警报窗口工作从我的JavaScript。我必须阻止删除操作，如果用户点击在“取消”按钮（在警报上），如果他们点击“确定”或右侧的十字（X）图标，则执行删除操作。这是我的标记和javascript

<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

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

我尝试在'打开'之后添加一个回调但似乎没有工作。也尝试使用jQuery捕获Cancel / Ok按钮单击事件。它们中的任何一个都工作。现在数据被删除，无论用户选择哪个按钮编辑：我尝试过类似的东西，但不能正常工作

$('#firstModal').foundation('reveal', 'open', function (value) {
                    if (value) {
                        modifySelectList(id, currentDefaultId);
                    }
                    else {
                        $('#firstModal').foundation('reveal', 'close');
                    }

                });

请帮忙在此先感谢

Answer 1

我通过添加以下代码来实现这一点（我将关闭（X）按钮移到了右上角（对我这样的人来说很有帮助）

    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
}

在“取消/确定”模式弹出窗口中添加逻辑单击“Foundation 5 Modal”

1 个答案: