IE6でjQuery UIのダイアログを開いたとき、裏側のプルダウンが前面に出てきてしまう場合の対応
今回のシステムではIE6でも動かなきゃダメってことになったんだけど、IE6では日記タイトルのような問題が発生してしまう。
こんな感じで↓
画面下に見えてる小さいダイアログの上に、裏側のプルダウン(セレクトボックス?)が見事に前面にでてきちゃってます。
そこで、bgiframeというjQueryのプラグインを使って対応することでこの問題が解消されるみたいです。(情報提供してくれたid:stokiwaくんとid:debit-credit-monkeyに感謝です)
http://plugins.jquery.com/project/bgiframe
使い方は簡単。上のページからダウンロードして展開したディレクトリの中にあるファイル「jquery.bgiframe.min.js」を読み込むようにしておき、
<script type="text/javascript" src="js/jquery/jquery.bgiframe.min.js"></script>
ダイアログを作る前に、bgiframe()関数を呼び出してやります。これだけ。(jQueryUIのダイアログの場合、この記事の下のほうの追記を見たほうがいいです)
var fm = $('#id_dialog'); fm.bgiframe();// ie6対応 // bgiframe()のあとでダイアログ作成 fm.dialog({ title: '登録/更新', width: 1000, height: 400, modal: true, hide: 'slide', position: 'top' });
いやー、これから廃れていくもののためにこんなに苦労しないといけないのか。不毛だ。IEはやくなくなれ。
追記
id:stokiwaくんにコメントもらいました。jQuery UIのダイアログを使っている場合はjquery.bgiframe.min.jsを読み込んだ上で、dialogのオプションに「bgiframe:true」を渡してやるだけでよいらしい。
var fm = $('#id_dialog'); fm.dialog({ bgiframe: true, // これを追加 title: '登録/更新', width: 1000, height: 400, modal: true, hide: 'slide', position: 'top' });
やった。すっきりした。