Question

我试图在点击按钮时关闭颜色框窗口。窗口应该是一个ajax分页窗口。

我已尝试使用示例页面，内联按钮可以关闭，我在ajax分页中编写的代码相同，但它会在控制台firebug中抛出错误，即

**"TypeError: $.colorbox is undefined


(9 out of range 6)"**

我真的不知道错误的含义。

我的HTML代码是.index.html

    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Colorbox Examples</title>
<style>
body {
    font:12px/1.2 Verdana, sans-serif;
    padding:0 10px;
}
a:link, a:visited {
    text-decoration:none;
    color:#416CE5;
    border-bottom:1px solid #416CE5;
}
h2 {
    font-size:13px;
    margin:15px 0 0 0;
}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){

                $(".ajax").colorbox();
                $(".inline").colorbox({inline:true, width:"50%"});

                $('#test_close').click('cbox_closed',function(e){
                     $('#test_close').colorbox.close();
                }); 

            });
        </script>
</head>
<body>
<p><a class='ajax' href="http://localhost/karthiga/demo/colorbox-master/content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
  <div id='inline_content' style='padding:10px; background:#fff;'>
    <p> Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem </p>
    <br/>
    <br/>
    <p><a href="javascript:void(0);" id="test_close">Close</a></p>
  </div>
</div>
</body>
</html>

ajax页面是：ajax.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
            $(document).ready(function(){

                $('#test_close1').click('cbox_closed',function(e){
                alert('');
                     $.colorbox.close();
                }); 
            });
        </script>
</head>
<body>
<p> Lorem ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum Lorem Ipsum Lorem ipsum Lorem Ipsum </p>
<br/>
<br/>
<p><a href="javascript:void(0);" id="test_close1">Close</a></p>
</body>
</html>

我做错了什么？

Answer 1

我在工作站上加载了一个完整的示例，发现了两个问题。

当Colorbox使用AJAX加载页面时，它实际上是内联的结果HTML。因为你的ajax.html文件正在加载jQuery和再次使用Colorbox小部件，它会导致问题。所以，删除这两个 ajax.html文件中的<script>标记。
在index.html中你打电话给$('#test_close').colorbox.close();。替换它与$.colorbox.close();。

这些应该可以解决您的问题。祝你好运！

Answer 2

将它放在你的ajax.html

中

<script>
    $(document).ready(function() {
        $('#test_close1').click(function(){
            parent.$.colorbox.close();
            return false;
        });
    });
</script>

Answer 3

尝试：

$('#test_close').click('cbox_closed',function(e){
    $.fn.colorbox.close();
});

$ .colorbox.close（）; colorbox关闭问题

3 个答案: