jQuery $.colorbox.close(); 颜色盒关闭问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20399244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$.colorbox.close(); colorbox close issue
提问by Aaru
I have tried to close the colorbox window while clicking the button. the window should be a ajax paged window.
我试图在单击按钮时关闭颜色框窗口。该窗口应该是一个 ajax 分页窗口。
I have tried with example page , the inline button can able to close, the same code i have written in the ajax paged but it throws the error in console firebug ie
我已经尝试过示例页面，内联按钮可以关闭，我在 ajax 中编写的相同代码分页，但它在控制台萤火虫中引发错误，即
**"TypeError: $.colorbox is undefined
(9 out of range 6)"**
I really don't know the meaning of the error.
我真的不知道错误的含义。
My HTML Code is .index.html
我的 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>
And the ajax page is : ajax.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>
What have I done wrong?
我做错了什么？
回答by ErinsMatthew
I loaded a full example on my workstation and found two issues.
我在我的工作站上加载了一个完整的例子，发现了两个问题。
- When Colorbox loads a page using AJAX, it actually inlines the
resulting HTML. Since your ajax.html file is loading jQuery and the
Colorbox widget again, it is causing issues. So, remove the two
<script>tags in your ajax.html file. - In index.html you
have a call to
$('#test_close').colorbox.close();. Replace this with$.colorbox.close();.
- 当 Colorbox 使用 AJAX 加载页面时，它实际上内联了生成的 HTML。由于您的 ajax.html 文件再次加载 jQuery 和 Colorbox 小部件，因此会导致问题。因此，删除
<script>ajax.html 文件中的两个 标签。 - 在 index.html 中，您可以调用
$('#test_close').colorbox.close();. 将其替换为$.colorbox.close();.
These should fix your issues. Good luck!
这些应该可以解决您的问题。祝你好运！
回答by Tahir Yasin
Put this inside your ajax.html
把它放在你的 ajax.html 中
<script>
$(document).ready(function() {
$('#test_close1').click(function(){
parent.$.colorbox.close();
return false;
});
});
</script>
回答by Hiral
Try:
尝试：
$('#test_close').click('cbox_closed',function(e){
$.fn.colorbox.close();
});
