colorboxを使った時に、閉じるボタンが最初から表示されてカッコ悪いのを解決する方法
スタイルシート
まずはスタイルシートで非表示に。「#cboxClose」はcolorboxが書き出す閉じるボタンのidなので、そのまま使ってOK。
#cboxClose {
display: none;
}
Javascript
colorboxを読み込むオプションに、「onComplete」と「onClosed」を追加
$(".modal").colorbox({
onComplete: function(){
$('#cboxClose').css('display','block');
},
onClosed: function(){
$('#cboxClose').css('display','none');
}
});
「.modal」は、colorboxの対象クラス名なので、自分のソースに合わせて書いてください。
「onComplete」に記述したものは、コンテンツが読み込まれColorBoxが表示されたときに実行されるので、ここで閉じるボタンを表示する。
「onClosed」に記述したものは、ColorBoxが完全に閉じられたら実行されるので、ここで再び閉じるボタンを消す。