I am using colorbox for modal popup and the content of the popup is ing from a URL since this is displayed inside an iFrame how can I add a close button to the modal popup?
Thanks
This is the code for color box
<a class="Modal" href="" onclick="openModal();">Click here</a>
And the js:
var openModal = function (){
$(".Modal").colorbox({
iframe:true,
opacity:0.5,
scrolling:true,
width:832,
height:456,
top:60
});
}
I am using colorbox for modal popup and the content of the popup is ing from a URL since this is displayed inside an iFrame how can I add a close button to the modal popup?
Thanks
This is the code for color box
<a class="Modal" href="http://google." onclick="openModal();">Click here</a>
And the js:
var openModal = function (){
$(".Modal").colorbox({
iframe:true,
opacity:0.5,
scrolling:true,
width:832,
height:456,
top:60
});
}
Share
Improve this question
edited May 4, 2012 at 18:24
Wouter Dorgelo
12k12 gold badges65 silver badges80 bronze badges
asked May 4, 2012 at 18:12
JayJay
2,5277 gold badges29 silver badges37 bronze badges
3
- possible duplicate of how to close colorbox within iframe? – Wouter Dorgelo Commented May 4, 2012 at 18:14
- I am really not sure how can I display and anchor link since the iframe is generated by colorbox. – Jay Commented May 4, 2012 at 18:16
- <a class="Modal" href="google." onclick="openModal();">Click here </a> var openModal = function (){ $(".Modal").colorbox({iframe:true, opacity:0.5, scrolling:true, width:832, height:456, top:60}); } – Jay Commented May 4, 2012 at 18:22
2 Answers
Reset to default 8Try adding this to colorbox-iframe.html
<input type="button" name="btnClose" value="Close" onclick="parent.$.colorbox.close()" />
I've never used colorbox before, but maybe you want to add the close button via jQuery in your function:
var openModal = function (){
$(".Modal").colorbox({
iframe:true,
opacity:0.5,
scrolling:true,
width:832,
height:456,
top:60
});
$("<div class='thisClosesTheModal'>Close Modal</div>").appendTo(".Modal");
// style .thisClosesTheModal to look like a close box
}
// and then the function that closes the modal
$(".thisClosesTheModal").live('click', function(){
$('Modal').hide();
}