$ .colorbox.close(); colorbox关闭问题

Question

$ .colorbox.close(); colorbox关闭问题

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

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

**"TypeError: $.colorbox is undefined


(9 out of range 6)"**

Run Code Online (Sandbox Code Playgroud)

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

我的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>

Run Code Online (Sandbox Code Playgroud)

而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>

Run Code Online (Sandbox Code Playgroud)

我做错了什么？

Answer 1

Eri*_*hew 12

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

当Colorbox使用AJAX加载页面时,它实际上内联了生成的HTML.由于您的ajax.html文件再次加载jQuery和Colorbox小部件,因此会导致问题.因此,删除<script>ajax.html文件中的两个标记.
在index.html中,您有一个电话$('#test_close').colorbox.close();.替换为$.colorbox.close();.

这些应该解决您的问题.祝好运!

归档时间：	12 年前
查看次数：	27654 次
最近记录：	11 年，3 月前