皆さんもご存知だと思います。
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();
もし使い方が間違ってたならご指摘をお願いいたします。
0 件のコメント:
コメントを投稿