Question

我使用this作为示例在页面加载时创建弹出窗口。代码在本地工作正常，但当我在服务器上添加它时它无法正常工作。我认为某些脚本可能与它有冲突但我不确定。我在Magento 1.7上运行。

1）这是我正在使用的link。

第1步

添加CSS＆amp; JS

    <link rel="stylesheet" type="text/css" href="<?php echo $this->getJSUrl('pop/colorbox.css'); ?>" media="screen"/>
<link media="screen" rel="stylesheet" target="_blank" href="<?php echo $this->getJSUrl('pop/popup.css'); ?>" />
<script language="javascript" src="<?php echo $this->getJSUrl('pop/colorbox.js'); ?>"></script>

第2步

在</head>

之前添加功能

    <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"});

}）;

第3步

在页脚添加HTML

<p>The subscription popup will activate if no cookie is set. Once the popup is closed a cookie is set which expires every 15 days. You can manually activate the subscription box below.</p>

<a href="#" class="open_popup">Click here to open the popup</a>

<!-- This contains the hidden content for inline calls for the subscribe box -->
<div style='display:none'>
<div id='subscribe_popup' style='padding:10px;'>
<h2 class="box-title">Never miss an update from Papermashup</h2>
<h3 class="box-tagline">Get notified about the latest tutorials and downloads.</h3>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
  <!-- BEGIN .box-side -->

  <!-- BEGIN #subs-container -->
 </div>
 </div>
</div>
<!-- END subscribe popup-->

Answer 1

以下是一个工作示例：http://jsfiddle.net/5USUu/6/

你必须包含jQuery，然后包含你正在使用的[colorBox.js][1]插件，一旦包含，一切都应该有效。我在colorBox中看到弹出文本Never miss an update from Papermashup。

我也改变了：

$("document") => $(document)

查看JSFiddle.

它在本地而不是在您的服务器上工作的事实意味着该文件可能不在您的服务器上（或使用错误的mime类型传输），请检查您的Console是否有要调试的错误。

另外，我看到你的源代码（http://miirue.com/m1/）看到你包含了两次jquery库，我也看到你包含其他库的加载，所以你可能需要使用jQuerys noConflict方法。

我看到你的代码存在很多问题，我并不觉得它不起作用。使用您的控制台进行调试，确保html全部有效，并且所有资源都使用正确的mime类型进行传输并且实际存在。

您的代码似乎没有任何问题（除了$（“document”）=＆gt; $（文档）），如果您的javascript在某个地方中断，它会破坏所有内容，因此请确保您的语法有效且正确。

页面加载弹出窗口，cookie无效

第1步

第2步

第3步

1 个答案: