facebox.jsを使用してIE6だとセレクトボックスが前面に出てしまう件の対処法
昨日、「Facebox 1.2 - LightBox風に角丸で画像をポップアップ」という記事に次のようなコメントをいただいたので、その対処法を考えてみました。 そんな中、もう一つだけ困ったことが出てきてしまいました。 絶対にプルダウンリストが必要な画面で使いたいのですが、 IE6のバグでプルダウンが前面に表示されてしまうのです...。 サンプルにプルダウンを付けてみました。(IE6のみ変なようです...
昨日、「Facebox 1.2 - LightBox風に角丸で画像をポップアップ」という記事に次のようなコメントをいただいたので、その対処法を考えてみました。
そんな中、もう一つだけ困ったことが出てきてしまいました。 絶対にプルダウンリストが必要な画面で使いたいのですが、 IE6のバグでプルダウンが前面に表示されてしまうのです...。 サンプルにプルダウンを付けてみました。(IE6のみ変なようです)
Google で調べてみると、どうやらこれはIE6のバグのようですね。
その対処法としては、iframe要素を使う方法とvisibility: hidden;を使う方法があるようですが、今回はHTMLには手を加えないで済むようにvisibility: hidden;でIE6でもFacebox 1.2が使えるようにしてみます。
まず、この問題が起こるのはIE6だけということなので、CSSに次の記述を加えます。
* html select.hide { visibility: hidden; }
これで、「IE6でhideというクラス名のselect要素は非表示」になります。
ということは、facebox.jsで画像をオーバーレイ表示している間だけ、select要素にhideというクラス名を付ければいいことになります。
そこで、facebox.jsの115、116行目当たりに次の１行を挿入します。
loading: function() { // 115行目
init() // 116行目
$('select').addClass('hide'); // 挿入
さらに、facebox.jsの後ろから5、6行目当たりに次の１行を挿入します。
hideOverlay() // 後ろから6行目
$('#facebox .loading').remove() // 後ろから5行目
$('select').removeClass('hide'); // 挿入
これで、facebox.jsが呼び出されたときにselect要素にhideクラスが付き、閉じるときにhideクラスが削除されます。
以上です。
, Updated 2019-06-25