我试图仅在显示模式处于活动状态的情况下运行一些 javascript。问题是,无论模态是否处于活动状态,我尝试过的方法都是 True。下面是我试图完成的示例。我已经尝试了:是可见的方法,也:活动。我正在使用 zurb 揭示模式。
该网页:
<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'
});
}
似乎这个插件在单击时会激活一个"开放"类。因此,您应该检查以下链接:
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
}
编辑
我关于:active
的美丽答案已经一去不复返了,希望这个更简单的答案能帮助您解决真正的问题,这基本上是我如何注册模态在页面上打开,并基于此执行一些代码?
答案来自这个StackOverflow帖子的答案,也取自基金会文档:
$('#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
}
});
这应该符合您正在寻找的内容。