2012年11月18日日曜日

Lightbox_meでOverlayが残ってしまう

皆さんもご存知だと思います。
Lightbox_meプラグインを僕も最近使いました。

使っていて気付いたことがあります。
Overlay要素がcloseしても消えないでdisplay:none状態で残っています。

使い方が悪いのか、仕様なのか、
Ajaxで取得した以下のようなhtmlをLightbox_meするとOverlayがdisplay:noneにならずに残ってしまい、クリックなどができなくなってしまう問題が発生しました。

■やりたいこと
フォームのプレビュー画面を出したい。

Lightbox_meしているボタンをクリックすると以下のAjax通信が始まって
読み込んで来たHTMLをさらにLightbox_meするという操作で。

しかし、キャンセル(close)すると問題がおきる。
操作が効かなくなるんです。

$.get('preview', {}, function(res){
  $(res).lightbox_me();
});

resには以下のようななHTMLソースコードが入ってます。
------Ajaxで読み込んで来た要素------
<div id="preview">
 ....
</div>
---------------------------------------------

デベロッパーコンソールで見てみるとOverlay要素がのこっていました。
しかもそれがdisplay:noneになっていなかった。


どうやら、Lightbox_meはOverlayをhide()するようです。
destroyOnCloseオプションを使えば消えるけど、表示内容まで消しちゃうから再利用できない。

Lightbox_meのソースコードを見てみるとOverlayはhide()するか表示要素と一緒に消す
ことしかできないことがわかったから。
ちょっと書き換えてみました。

125行目をコメントアウトしてOverlayを消すようにしました。
※オプションにした方が使いやすそう...


                    //$self.add($overlay).hide();
            $self.hide();
            $overlay.remove();

もし使い方が間違ってたならご指摘をお願いいたします。