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が完全に閉じられたら実行されるので、ここで再び閉じるボタンを消す。

いいなと思ったら応援しよう!