Zurb Foundation 4 Reveal Modal:不会关闭

时间:2013-08-27 16:11:13

标签: javascript jquery modal-dialog zurb-foundation

我正在使用带有Reveal 4.3.2和jQuery 2.0.3的Foundation 4.3.1。我使用以下代码以编程方式成功打开模式:

$('.akita-modal-ajax').on('click', function (e) {
    e.preventDefault();

    var modalId = $(this).data('id'),
        url = $(this).attr('href');

    $('#' + modalId).foundation('reveal', 'open', {
        url: url;
    });
});

我用来尝试关闭模式的代码是:

$('.akita-modal').on('click', '.close-reveal-modal',function () {
    console.log('click');
    $('.akita-modal').foundation('reveal', 'close');
});

我的模态(一旦打开):

<div id="myModal" class="akita-modal open" style="display: block; opacity: 1; visibility: visible; top: 50px;">
    <a class="close-reveal-modal">×</a>
    ...More content...
</div>

当我点击关闭模态时,它会在控制台中注册“click”,但模态仍保持打开状态。有趣的是,如果我忽略我的自定义类并将'akita-modal'的所有引用恢复为'reveal-modal',一切都可以正常工作。但后来我坚持使用Reveal的默认样式。

我也尝试过:

$('.akita-modal').on('opened', function () {
    $('.akita-modal').on('click', '.close-reveal-modal',function () {
        console.log('click');
        $('.akita-modal').foundation('reveal', 'close');
    });
});

具有完全相同的结果。记录“点击”但模态仍保持打开状态。我的控制台中没有其他错误,除了JoelCDoyle回答另一个SO问题之外,我没有遇到过这个问题:Revealing a Modal in Foundation 4

如何使用我自己的类名来关闭此模态?

2 个答案:

答案 0 :(得分:3)

实际上,当您忘记属性“数据显示”时,可能会发生这种情况。 那是怎么写的:

<div class="reveal-modal" data-reveal>
...
</div>

答案 1 :(得分:2)

通常我会使用模态ID来关闭它,如下所示:

$('#myModal').foundation('reveal', 'close');

它有效,所以使用类名而不是ID可能会有问题......?