ベストアンサー

プルダウンメニューアイテムの画面優先順位

2006/04/12 11:05

画面上に<div>タグによるサブウインドウを表示して処理を行うようなページを製作しているのですが、<select></select>のプルダウンメニューだけはz-indexなどで指定した優先順位を無視して、常に最前面に表示されてしまいます（IE以外では未確認ですが・・・）。このエレメントの優先順位を下げる方法はないのでしょうか。最近A-JAXの発展でデスクトップと同等のインターフェースを備えたWebアプリケーションが増えているので、必ずこの問題にも解決法を見出しているはずだと考えているのですが・・・。よろしくお願いします。

ategon
お礼率53% (8/15)

JavaScript
回答数1
ありがとう数4

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#22259

2006/04/12 12:49 回答No.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>

質問者

お礼 2006/04/12 13:30

ありがとうございます。ソースが無くても「iframeなら透過しない」の一言でも良かったのですが、ソースまで付けてくださって感謝します。自分でも関連していそうなページを発見しました。 Weblogicの開発者向けのページらしく、cssで表示させたメニューの下にiframeのシム（と呼んでいるらしい）を置いてこの問題を解決するというものでした。ただ、この手法は既存のロジックをそのまま使用すべき場合に有効であって、今回のように新規に作成しようとする場合、単純に<div>から<iframe>に置き換えても問題ないのかと思われますが、どうなのでしょうか。

質問者

補足 2006/04/12 17:31

結局、<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'; }

ログインすると、全ての回答が全文表示されます。