1

我试图仅在显示模式处于活动状态的情况下运行一些 javascript。问题是，无论模态是否处于活动状态，我尝试过的方法都是 True 。下面是我想要完成的一个例子。我试过：是可见的方法，也是：活动的。我正在使用 zurb 显示模式。

的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'))

编辑

活动时有“可见性”的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 回答