- ベストアンサー
innerHTMLに重なるselectボックス
小さな画面を出しているのですが、開いた画面がselectボックスに重なると、selectボックスが前面になってしまいます。 これはどうにかならないでしょうか？ 以下サンプルスクリプト <html> <head> <title>テスト</title> </head> <body> <script language="JavaScript"><!-- b_color="red"; //枠の色 g_color="#ffffff"; //背景の色 f_size="10"; //文字サイズ f_color="#000000"; //文字色 set_x=-20; //オフセットX set_y=-5; //オフセットY //-------------------------------------- document.write("<div ID='tiptext'STYLE='position:absolute;z-index:2;border:1px solid;padding:5px;"); document.write("border-color:"+b_color+";font-size:"+f_size+"pt;background-color:"+g_color+";"); document.write("color:"+f_color+";"); document.write("display:none'>"); document.write("</div>"); function openw(t1){ divid="tiptext"; if(document.all){ d_div=document.all(divid); rx = event.clientX + document.body.scrollLeft +set_x; ry = event.clientY + document.body.scrollTop +set_y; }else{ d_div=document.getElementById(divid); rx = NNX + set_x; ry = NNY + set_y; } if (t1) { d_div.style.display="block"; d_div.style.left = rx +"px"; d_div.style.top = ry +"px"; d_div.innerHTML = "<p>画面表示</p>"; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; d_div.innerHTML += '<br>'; d_div.innerHTML += 'a<br>'; d_div.innerHTML += 'i<br>'; d_div.innerHTML += 'u<br>'; d_div.innerHTML += 'e<br>'; d_div.innerHTML += 'o<br>'; d_div.innerHTML += '<br>'; //d_div.innerHTML = d_div.innerHTML +'<a href="#" onclick="openkeyboard(\'\')">閉じる</a><br>'; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; }else{ d_div.style.display="none"; d_div.innerHTML = ""; } } function MouseXY(NNevent){ NNX = NNevent.pageX; NNY = NNevent.pageY; } window.onmousemove = MouseXY; /* himajin.moo.jp */ // --> </script> <a href="#" onclick="openw('1')">子画面表示</a><br> あ<br> い<br> う<br> え<br> お<br> <a href="#" onclick="openw('1')">子画面表示</a><br> <form> <input type="text"><br> <input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><br> <select name="zz"> <option value="0">00000000000000</option> <option value="1">11111111111111</option> <option value="2">22222222222222</option> <option value="3">33333333333333</option> </select> </form> <a href="#" onclick="openw('1')">子画面表示</a><br> </body> </html>
- moon_night
- お礼率80% (40/50)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE7ではこの問題は起こりませんがバージョン6以下ですと問題が起こりますね。 残念ながら前に表示されてしまうのは仕様で<select>タグより後ろに表示することはできませんので、ポップアップを表示している時だけ<select>タグを非表示にするのがいいと思います。 Adobeの公式サイトでも<select>タグを一時的に非表示にするようになっています。（上のメニューにマウスを乗せるとポップアップが開きます） 参照：http://www.adobe.com/jp/products/ <script language="JavaScript"><!-- b_color="red"; //枠の色 g_color="#ffffff"; //背景の色 f_size="10"; //文字サイズ f_color="#000000"; //文字色 set_x=-20; //オフセットX set_y=-5; //オフセットY //-------------------------------------- document.write("<div ID='tiptext'STYLE='position:absolute;z-index:2;border:1px solid;padding:5px;"); document.write("border-color:"+b_color+";font-size:"+f_size+"pt;background-color:"+g_color+";"); document.write("color:"+f_color+";"); document.write("display:none'>"); document.write("</div>"); function openw(t1){ divid="tiptext"; if(document.all){ d_div=document.all(divid); rx = event.clientX + document.body.scrollLeft +set_x; ry = event.clientY + document.body.scrollTop +set_y; }else{ d_div=document.getElementById(divid); rx = NNX + set_x; ry = NNY + set_y; } if (t1) { selectHide(); d_div.style.display="block"; d_div.style.left = rx +"px"; d_div.style.top = ry +"px"; d_div.innerHTML = "<p>画面表示</p>"; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; d_div.innerHTML += '<br>'; d_div.innerHTML += 'a<br>'; d_div.innerHTML += 'i<br>'; d_div.innerHTML += 'u<br>'; d_div.innerHTML += 'e<br>'; d_div.innerHTML += 'o<br>'; d_div.innerHTML += '<br>'; //d_div.innerHTML = d_div.innerHTML +'<a href="#" onclick="openkeyboard(\'\')">閉じる</a><br>'; d_div.innerHTML += "<span style=\"cursor:hand;color:#0000ff;text-decoration: underline;\" onclick=\"openw('')\">閉じる</span><br>"; }else{ selectShow(); d_div.style.display="none"; d_div.innerHTML = ""; } } function MouseXY(NNevent){ NNX = NNevent.pageX; NNY = NNevent.pageY; } window.onmousemove = MouseXY; function selectHide(){ sellen=document.getElementsByTagName("SELECT").length; for (i = 0; i < sellen; i++) { document.getElementsByTagName("SELECT")[i].style.visibility="hidden"; } } function selectShow(){ for (i = 0; i < sellen; i++) { document.getElementsByTagName("SELECT")[i].style.visibility="visible"; } } /* himajin.moo.jp */ // --> </script>
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
本文とかソースコードとか読んでません。m(_ _)m > selectボックスが前面になってしまいます。 この文から察するに、たぶんこれが原因と対処法です。 http://www.beasys.co.jp/dev2dev/pub/a/2005/4/portal_menus..html
お礼
多分それが原因です。 ちょっと面倒そうなので今回は＃１さんの方法で実装します。 資料ありがとうございました。
お礼
サンプルまで作っていただきましてありがとうございます。 分かりやすい説明で大変助かりました。 この方法で実装するようにします。