帶有iframe的colorbox關閉按鈕

Question

我正在使用colorbox進行模態彈出，並且彈出窗口的內容來自URL，因為它顯示在iFrame中，如何在模式彈出窗口中添加關閉按鈕？

謝謝

這是彩盒的代碼

<a class="Modal" href="http://google.com" onclick="openModal();">Click here</a>

和js：

var openModal = function (){        
     $(".Modal").colorbox({
         iframe:true, 
         opacity:0.5, 
         scrolling:true, 
         width:832, 
         height:456, 
         top:60
     });
}

Answer 1

嘗試將此添加到colorbox-iframe.html

<input type="button" name="btnClose" value="Close" onclick="parent.$.colorbox.close()" />

Answer 2

我以前從未使用過colorbox，但也許你想在你的函數中通過jQuery添加關閉按鈕：

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();

}