我有一个fancybox灯箱已实施on this site,但它无法打开,我无法弄清楚原因。
作为参考,它正在使用此网站:http://triathlon.joomlatest01.mms-dev.com/
点击“#34;了解详情”#34;或者"不要再显示这一点",它会设置一个cookie并且不会再次显示(除非你清除你的cookie)。
我在两个网站上添加了所有相同的代码(如下所列),所以不知道它为什么不起作用。
<!-- Add fancyBox Lightbox -->
<link rel="stylesheet" href="/js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/js/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
function setCookie() {
document.cookie="lightboxcookie=lightboxseen; expires=Thu, 18 Dec 2020 12:00:00 UTC";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var thecookie=getCookie("lightboxcookie");
if (thecookie != "") {
} else {
<!--Show Lightbox-->
jQuery.noConflict()(function ($) {
$(document).ready(function() {
$(".lightbox").fancybox({
helpers : {
overlay : {
closeClick: false,
css : {
'background' : 'rgba(0, 45, 92, 0.80)'
}
}
}
});
$(".lightbox").eq(0).trigger('click');
});
});
}
}
</script>
<body onload="checkCookie()">
<style>
div#lightbox {
background: #fff;
opacity: 1 !important;
height: 200px;
text-align: center;
}
div#lightbox h1{
font-size: 20px;
}
a.lightbox {
display: inline-block;
max-width: 200px;
background: #002D5C;
color: white;
border-radius: 5px;
text-decoration: none;
padding: 5px 20px;
}
a.lightbox_learnmore {
height: 40px;
font-size: 28px;
padding-top: 1px;
margin-top: 10px;
margin-bottom: 20px;
}
a.lightbox_dontshow {
height: 30px;
font-size: 12px;
padding-top: 8px;
}
a.lightbox_dontshow {
background: #ddd;
color: gray;
}
a.lightbox_learnmore:hover {
background: #1366a0;
}
a.lightbox_dontshow:hover {
background: #bbb;
color: white;
}
a.fancybox-close {
display: none;
}
.fancybox-skin {
background: #ffffff;
}
div#lightbox p{
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.fancybox-inner {
width: 650px !important;
height: 500px !important;
}
@media (min-width: 10px) and (max-width:767px) {
.fancybox-inner {
width: 100% !important;
height: 100% !important;
}
.fancybox-wrap {
top: 25px !important;
}
.fancybox-skin {
height: 700px !important;
}
.fancybox-inner {
height: 700px !important;
}
}
</style>
<a style="display: none;" class="lightbox" href="#lightbox">Lightbox</a>
<div style="display:none"><div id="lightbox"><h1><img src="http://ww2.joomlatest01.mms-dev.com/images/mds_logo.png" width=200/> <img src="http://ww2.joomlatest01.mms-dev.com/images/isnow.png" width=80 /> <img src="http://ww2.joomlatest01.mms-dev.com/images/Workwave_Logo_250.png" /></h1>
<br/>
<p>We’ve changed our name from Marathon Data Systems to WorkWave! The Marathon Data Systems brand has been a mainstay in field service management software for over 30 years. We’re doing this now, because we feel the time is right to unify our brand and messaging to more accurately reflect how our product offerings connect every aspect of our your business, providing an unprecedented level of insight into your office and field operations enabling you to truly delight your clients and supercharge your business performance.</p>
<p>
Our goal is to make this transition as easy as possible with little to no impact for our customers. For frequently asked questions regarding our change to WorkWave and how it may affect you, please click “learn more” for additional info.
</p>
<a class="lightbox lightbox_learnmore" href="" onclick="setCookie()">Learn More</a><br/><a class="lightbox lightbox_dontshow" href="" onclick="setCookie()">Don't show this again</a>
</div></div>