- ベストアンサー
プルダウンメニューアイテムの画面優先順位
画面上に<div>タグによるサブウインドウを表示して処理を行うようなページを製作しているのですが、<select></select>のプルダウンメニューだけはz-indexなどで指定した優先順位を無視して、常に最前面に表示されてしまいます（IE以外では未確認ですが・・・）。 このエレメントの優先順位を下げる方法はないのでしょうか。 最近A-JAXの発展でデスクトップと同等のインターフェースを備えたWebアプリケーションが増えているので、必ずこの問題にも解決法を見出しているはずだと考えているのですが・・・。 よろしくお願いします。
- ategon
- お礼率53% (8/15)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
//IE5+,NN6,Moz <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>???</title> <style> #fx{width:120px;height:150px;position:absolute;top:20;left:40;display:none;} </style> <script type="text/javascript"> function showMenu() { document.getElementById('fx').style.display = 'inline'; } function hideMenu() { document.getElementById('fx').style.display = 'none'; } </script> <body> <iframe id="fx" frameborder=0 scrolling=no marginwidth=0 marginheight=0 src="select.html"></iframe> <input type=button value="Show Menu" onclick="showMenu()"> <input type=button value="Hide Menu" onclick="hideMenu()"> </body> </html> ---[select.html]--- <form> <select name="sel"> <option value="1">Red</option> <option value="2">Green</option> <option value="3">Blue</option> </select> </form>
お礼
ありがとうございます。 ソースが無くても「iframeなら透過しない」の一言でも良かったのですが、ソースまで付けてくださって感謝します。 自分でも関連していそうなページを発見しました。 Weblogicの開発者向けのページらしく、cssで表示させたメニューの下にiframeのシム（と呼んでいるらしい）を置いてこの問題を解決するというものでした。 ただ、この手法は既存のロジックをそのまま使用すべき場合に有効であって、今回のように新規に作成しようとする場合、単純に<div>から<iframe>に置き換えても問題ないのかと思われますが、どうなのでしょうか。
補足
結局、<iframe>だとinnerHTMLで流し込めないので<div>タグのエレメントを引数に渡すとその下に同サイズの<iframe>を設置する関数を作ってみました。 ちなみにシムのサイズはcssで別途指定して合わせてます。 // シム（プルダウンが透ける問題対策）作成・表示 function SimView(elem){ //取得or作成 if(document.getElementById(elem.id+'Sim')){ Sim = document.getElementById(elem.id+'Sim'); } else { //シム作成 var Sim = document.createElement('iframe'); Sim.id = elem.id+'Sim'; Sim.scrolling = 'no'; Sim.frameborder = '0';//なぜか消えない・・・ document.body.appendChild(Sim); } //シム表示（元エレメントのデータを参照） Sim.style.left = elem.style.left; Sim.style.top = elem.style.top ; Sim.style.display = 'block'; }