【问题标题】:Zurb Foundation 4 Reveal Modal: Won't closeZurb Foundation 4 Reveal Modal:不会关闭
【发布时间】:2013-08-30 12:09:04
【问题描述】:

我将 Foundation 4.3.1 与 Reveal 4.3.2 和 jQuery 2.0.3 一起使用。我正在使用以下代码以编程方式成功打开模式:

$('.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>

当我单击以关闭模式时,它会在控制台中注册“单击”,但模式仍保持打开状态。有趣的是,如果我忽略我的自定义类并将“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

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

【问题讨论】:

标签: javascript jquery modal-dialog zurb-foundation


【解决方案1】:

实际上,当您忘记属性“data-reveal”时可能会发生这种情况。 应该是这样写的:

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

【讨论】:

    【解决方案2】:

    通常我使用模态ID来关闭它,像这样:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-12-15
      • 1970-01-01
      • 1970-01-01
      • 2014-02-22
      • 2015-03-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多