2

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

まったく同じ結果です。「クリック」はログに記録されますが、モーダルは開いたままです。コンソールには他にエラーはありません。別の SO の質問に答えた JoelCDoyle 以外に、この問題を抱えている人に遭遇したことはありません: Foundation 4 でモーダルを明らかにする

独自のクラス名を使用してこのモーダルを閉じるにはどうすればよいですか?

4

2 に答える 2

3

通常、次のようにモーダル ID を使用して閉じます。

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

そしてそれは機能するので、IDの代わりにクラス名を使用することに問題があるのでしょうか...?

于 2013-09-11T09:48:37.660 に答える
3

実際には、属性「data-reveal」を忘れたときに発生する可能性があります。それはそれがどのように書かれるべきかです：

<div class="reveal-modal" data-reveal>
...
</div>
于 2014-10-04T12:37:25.923 に答える