Menu
I have tried to close the colorbox window while clicking the button. the window should be a ajax paged window.
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
**"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
<!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
<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?
304
I loaded a full example on my workstation and found two issues.
<script> tags in your ajax.html file.$('#test_close').colorbox.close();. Replace this
with $.colorbox.close();.These should fix your issues. Good luck!
167
Put this inside your ajax.html
<script>
$(document).ready(function() {
$('#test_close1').click(function(){
parent.$.colorbox.close();
return false;
});
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
