Question

我有一个CSS / JS图像滑块，似乎阻止了我之前在网站上使用的CSS / JS自动叠加弹出窗口（用于简报订阅）。

滑块可以使用或不使用弹出代码;但是使用页面上的滑块代码，弹出窗口将不起作用，并且一旦删除滑块代码就会再次运行。

我对JS的理解非常有限，所以我尝试了所有我能想到的并且没有取得任何进展。

相关代码如下，相关网页为http://www.catalystathletics.com（弹出窗口只应在首次访问时显示，除非浏览器已清除）。

提前感谢任何建议！

<!-- HEADER SLIDER -->
<link rel="stylesheet" href="/_inc/slider/slippry.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/_inc/slider/slippry.min.js"></script>
<script>
jQuery(document).ready(function(){
  jQuery('#headerSlider').slippry();
});
</script>
<!-- END HEADER SLIDER -->




<!-- SUBSCRIPTION POPUP -->
    <link media="screen" rel="stylesheet" target="_blank" href="/_inc/subPopup/colorbox.css" />
    <!-- Style For the Subscription Box -->
    <link media="screen" rel="stylesheet" target="_blank" href="/_inc/subPopup/popup.css" />
    <!-- <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> -->
    <script language="javascript" src="/_inc/subPopup/colorbox.js"></script>
<script>
$("document").ready(function (){ 

       // load the overlay

        if (document.cookie.indexOf('visited=true') == -1) {
            var fifteenDays = 1000*60*60*24*15;
            var expires = new Date((new Date()).valueOf() + fifteenDays);
            document.cookie = "visited=true;expires=" + expires.toUTCString();
            $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
        }

        $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

 });
</script>
<!-- END SUBSCRIPTION POPUP -->

Answer 1

您正在使用旧版colorbox作为控制台日志＆＃34; TypeError: a.browser is undefined＆＃34;，请尝试将您的彩盒插件更新为最新版本。如果这不能解决问题，请尝试使用jquery-migrate脚本，如下：

<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>

Answer 2

如果您使用jquery and colorbox js updated version，它应该可行我根据您的需要在js fiddle编辑了它的工作效果。

你可以在这里看到：http://jsfiddle.net/abidkhanweb/5456sxLa/

CSS / JS滑块代码阻止CSS / JS叠加

2 个答案: