2015-07-11 59 views
0

我目前正在尝试使用插件jquery colorbox为每个访问者打开一个包含我设置的cookie的灯箱。问题是它不是开放的。有人看到我在代码中犯了什么错误吗? $ .colorbox({html:“Jquery Colorbox插件自动打开问题

Hello

”});作品,但不是一个选项,我需要使用内联内容类型。

<html> 
 
\t <head> 
 
\t \t <meta charset='utf-8'/> 
 
\t \t <title>Colorbox Examples</title> 
 
\t \t <style> 
 
\t \t \t body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;} 
 
\t \t \t a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} 
 
\t \t \t h2{font-size:13px; margin:15px 0 0 0;} 
 
\t \t </style> 
 
\t \t <link rel="stylesheet" href="colorbox.css" /> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
\t \t <script src="jquery.colorbox.js"></script> 
 
\t \t <script> 
 
\t \t \t $(document).ready(function(){ 
 
\t \t \t \t 
 
\t \t \t \t $(".inline").colorbox({inline:true, width:"50%"}); 
 
\t \t \t \t $(".callbacks").colorbox({ 
 
\t \t \t \t \t onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
 
\t \t \t \t \t onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
 
\t \t \t \t \t onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
 
\t \t \t \t \t onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
 
\t \t \t \t \t onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
 
\t \t \t \t }); 
 

 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t //Example of preserving a JavaScript event for inline calls. 
 
\t \t \t \t $("#click").click(function(){ 
 
\t \t \t \t \t $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t }); 
 

 

 
if (document.cookie.indexOf('visited=true') === -1) { 
 
    var expires = new Date(); 
 
    expires.setDate(expires.getDate()+30); 
 
    document.cookie = "visited=true; expires="+expires.toUTCString(); 
 
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"}); 
 
} 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t 
 
\t \t <p><a class='inline' href="#inline_content">Inline HTML</a></p> 
 
\t \t 
 
\t \t 
 
\t \t <!-- This contains the hidden content for inline calls --> 
 
\t \t <div> 
 
\t \t \t <div id='inline_content' style='padding:10px; background:#fff;'> 
 
\t \t \t <p><strong>This content comes from a hidden element on this page.</strong></p> 
 
\t \t \t <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p> 
 
\t \t \t <p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

回答

0

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset='utf-8'/> 
 
\t \t <title>Colorbox Examples</title> 
 
\t \t <style> 
 
\t \t \t body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;} 
 
\t \t \t a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} 
 
\t \t \t h2{font-size:13px; margin:15px 0 0 0;} 
 
\t \t </style> 
 
\t \t <link rel="stylesheet" href="colorbox.css" /> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
\t \t <script src="jquery.colorbox.js"></script> 
 
\t \t <script> 
 
\t \t \t $(document).ready(function(){ 
 
\t \t \t \t 
 
\t \t \t \t $(".inline").colorbox({inline:true, width:"50%"}); 
 
\t \t \t \t $(".callbacks").colorbox({ 
 
\t \t \t \t \t onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
 
\t \t \t \t \t onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
 
\t \t \t \t \t onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
 
\t \t \t \t \t onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
 
\t \t \t \t \t onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
 
\t \t \t \t }); 
 

 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t //Example of preserving a JavaScript event for inline calls. 
 
\t \t \t \t $("#click").click(function(){ 
 
\t \t \t \t \t $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t }); 
 

 

 
if (document.cookie.indexOf('visited=true') === -1) { 
 
    var expires = new Date(); 
 
    expires.setDate(expires.getDate()+30); 
 
    document.cookie = "visited=true; expires="+expires.toUTCString(); 
 

 
      $.colorbox({width:"30%", inline:true, href:"#inline_content"}); 
 
} 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t 
 
\t \t <p><a class='inline' href="#inline_content">Inline HTML</a></p> 
 
\t \t 
 
\t \t 
 
\t \t <!-- This contains the hidden content for inline calls --> 
 
\t \t <div> 
 
\t \t \t <div id='inline_content' style='padding:10px; background:#fff;'> 
 
\t \t \t <p><strong>This content comes from a hidden element on this page.</strong></p> 
 
\t \t \t <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p> 
 
\t \t \t <p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>