1

明らかにモーダルがアクティブであるという条件でのみ、いくつかのJavaScriptを実行しようとしています。問題は、モーダルがアクティブかどうかにかかわらず、私が試したメソッドが True であったことです。以下は、私が達成しようとしていることの例です。:is visible メソッドと :active も試しました。私はzurb Revealモーダルを使用しています。

html:

<div id="myModal" class="reveal-modal">
    <ul>
        <li>some list item</li>
        <li>some list item</li>
    </ul>
</div> <!--/myModal-->

JS:

<script>
    if ($('#myModal:active').length){
        console.log('yes'); //always yes even when not revealed
    } else { 
        //do nothing
    }
</script>

//also tried if ($('#myModal').hasClass('someClass'))

編集

アクティブ時は「visibility」：「visible」、それ以外は「hidden」のCSSがあるので、以下を試してみたのですが、条件に反応しません。なぜそれが起こるのでしょうか？

if($("#myModal").css("visibility", "hidden").length > 0) {
    console.log('is hidden');
} else {
    console.log('is shown');
}

これは、表示ポップアップ用のZurb のオプションを含むCookie コードです。

if (document.cookie.indexOf('visited=true') == -1) {
    var tenYears = 3600 * 1000 * 24 * 365 * 10;   //1000*60*60*24*15;//15days
    var expires = new Date((new Date()).valueOf() + tenYears);
    document.cookie = "visited=true;expires=" + expires.toUTCString() +  ";path=/";  //encodeURIComponent +
    // Zurb's popup reveal modal
    $('#myModal').reveal({
        animation: 'fadeAndPop', 
        animationspeed: 100,                      
        closeonbackgroundclick: true,              
        dismissmodalclass: 'close-reveal-modal'
    });
}
4

2 に答える 2

5

このプラグインをクリックすると、「オープン」クラスがアクティブになるようです。したがって、次のようなリンクを確認する必要があります。

if($(".modal-link").hasClass('open')) {
    //do stuff when modal active
} else {
    //do stuff when modal not active
}

さらに良いことに:

if($("#my-Modal").is(":visible")) {
    //you get the point
}
于 2013-11-06T20:59:49.203 に答える
1

編集

についての私の美しい答えはなくなりました:active。うまくいけば、このより簡単な答えがあなたの本当の質問に役立つことを願っています.

回答は、この StackOverflow 投稿の回答から採用されており、 Foundation のドキュメントからも取得されています。

$('#myModal').reveal({
    animation: 'fadeAndPop', 
    animationspeed: 100,                      
    closeonbackgroundclick: true,              
    dismissmodalclass: 'close-reveal-modal',
    opened:function(){
        console.log('yes');
        // magic
    }
});

このopenedイベントは...ご想像のとおり...モーダルが開かれたときにのみ発生します。これは、最初に訪問したときにのみ呼び出されます。何らかの理由で、モーダルを閉じたときに停止する必要がある継続的なアクションがある場合は、次のようにバインドしclosedます。

$('#myModal').reveal({
    animation: 'fadeAndPop', 
    animationspeed: 100,                      
    closeonbackgroundclick: true,              
    dismissmodalclass: 'close-reveal-modal',
    opened:function(){
        console.log('yes');
        // magic
    },
    closed:function(){
        // witchcraft
    }
});

これは、探しているものの線に沿っている必要があります。

于 2013-11-06T21:12:21.213 に答える