所以我试图结合两个不同线程给出的工作解决方案,我在这里发现:
1)延迟弹出10秒,只弹出一次
2) fanybox - "Don't show this message "按钮?
我想让我的fanybox在x秒后打开,然后在xx秒后自动关闭。我把它弄得很好!
然后当我想添加链接到我的模态框设置cookie时,当用户点击它,永远不会显示框再次给他们x天,它似乎没有设置cookie来有效地做到这一点。
这是我目前得到的:
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}
function dontshow(){
$.fancybox.close(); // Use this line if I want the button to close fancybox.
$.cookie('visited', 'yes', { expires: 7300 }); // Set the cookie.
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$("#testBox").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': true,
'showCloseButton': true,
'overlayShow': true,
'overlayOpacity': 0.3,
}); // ready
setTimeout( function() {$.fancybox.close(); },22000); // additive, so 15secs + 7secs open time = 22 secs
});
</script>
是的,我有JQuery cookie脚本在我的服务器上。
我怀疑调用openFancybox()两次可能是问题(我对Javascript不太了解)..但当我试图插入:
时{
setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}
位后:
else {
openFancybox()
…然后我就不知道有多少{和;或者)我可能/可能不需要!
(已经测试了无尽的组合!. .这有点像在黑暗中找黑猫,而我却不知道自己在做什么……只要知道我想让它做什么!)
我的模态FancyBox的内联代码是:
<!-- INLINE FANCYBOX-->
<a id="testbox" href="#target"></a>
<div style="display:none"><div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>
<br>
</div></div>
我的测试页面URL: http://www.wayofthewomb.com/timed_pop_up_TESTER.html
谢谢你的建议/建议/指导!感谢这个神奇的资源,在这里!
您已经接近完成了,但是还有几个问题:
-
最重要的是,你错过了jquery。饼干的依赖!这个插件被js-cookie取代。将其包含在您的页面中,如:
<script src='//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.min.js'></script>
- 你的html和JS之间有一些不匹配的大小写:注意
testbox
vstestBox
否则你就可以走了!
这是一个工作小提琴:http://jsfiddle.net/memeLab/pr1f1cys/8/
function openFancybox() {
setTimeout(function () {
$('#testbox').trigger('click');
}, 5000);
}
function dontShow() {
$.fancybox.close();
// Set the cookie.
Cookies('visited', 'yes', {
expires: 7300
});
}
$(document).ready(function () {
var visited = Cookies('visited');
if (visited == 'yes') {
console.log('Theres a visited cookie');
return false;
} else {
openFancybox();
}
// create an event listener: when #noShow is clicked, run dontShow
$('#noShow').click(dontShow);
$('#testbox').fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': true,
'showCloseButton': true,
'overlayShow': true,
'overlayOpacity': 0.3
});
// additive, so 15secs + 7secs open time = 22 secs
setTimeout(function () {
$.fancybox.close();
}, 22000);
});
我建议在问这类问题时使用jsfiddle或codepen等创建最基本的,简化的示例:它简化了问题,并且意味着当您的测试页面不可避免地消失时,之后的人仍然可以看到代码。
你的页面上还有几个问题值得检查:
- 看起来像你加载jquery不止一次。可能会有问题!
- 您已经在
<style>
标记中嵌套了一个html注释<!-- -->
,这可能会在编辑器中抛出语法高亮显示(不会使生活变得更轻松!) - 我建议在DocReady上使用点击处理程序,而不是使用onClick html属性(见
#noShow
)
评论语法:
- html注释:
<!-- commented out -->
Javascript单行注释: - CSS注释(可能是多行):
/* commented out */
// commented out
Javascript多行/块注释:/* commented n out */
希望有帮助!