1

我以此为例在页面加载时创建我的弹出窗口。该代码在本地运行良好，但是当我将其添加到服务器上时，它无法正常工作。我认为某些脚本可能与它冲突，但我不确定是哪个。我在 Magento 1.7 上运行。

1）这是我正在使用的链接。

2) http://jsfiddle.net/5USUu/

步骤1

添加 CSS 和 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-->
4

1 回答 1

1

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

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

我也改变了： 

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

查看JSFiddle。

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

另外，我看到您的源代码（http://miirue.com/m1/）包含两次 jquery 库，我还看到您包含其他库的负载，因此您可能需要使用jQuerys noConflict方法.

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

您的代码似乎没有任何问题（除了 $("document") => $(document) ），如果您的 javascript 在某处中断，它将破坏所有内容，因此请确保您的语法有效且正确。

于 2013-05-22T16:18:45.050 回答