![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
画面上に<div>タグによるサブウインドウを表示して処理を行うようなページを製作しているのですが、<select></select>のプルダウンメニューだけはz-indexなどで指定した優先順位を無視して、常に最前面に表示されてしまいます(IE以外では未確認ですが・・・)。
このエレメントの優先順位を下げる方法はないのでしょうか。
最近A-JAXの発展でデスクトップと同等のインターフェースを備えたWebアプリケーションが増えているので、必ずこの問題にも解決法を見出しているはずだと考えているのですが・・・。
よろしくお願いします。
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>
この回答への補足
結局、<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';
}
ありがとうございます。
ソースが無くても「iframeなら透過しない」の一言でも良かったのですが、ソースまで付けてくださって感謝します。
自分でも関連していそうなページを発見しました。
Weblogicの開発者向けのページらしく、cssで表示させたメニューの下にiframeのシム(と呼んでいるらしい)を置いてこの問題を解決するというものでした。
ただ、この手法は既存のロジックをそのまま使用すべき場合に有効であって、今回のように新規に作成しようとする場合、単純に<div>から<iframe>に置き換えても問題ないのかと思われますが、どうなのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- BTOパソコン OSの入ったHDDがBIOSには認識されるが起動しない 5 2022/04/15 00:47
- 仕事術・業務効率化 作業をする時に、作業順や優先順位をちゃんと付けれるようになりたいです。 自分は作業したりする時、頭の 3 2023/07/11 03:15
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Excel(エクセル) Excel 複数列のある文字を優先して1列に表示したいです 2 2022/12/03 12:07
- gooポイント gooポイントをdポイントに交換できない。 3 2022/04/22 20:39
- その他(悩み相談・人生相談) 僕の家族は、父、母、長男、姉、次男、僕の6人家族です 僕の家族はいつからか、家族内で優先順位が出来ま 3 2022/06/12 04:14
- Excel(エクセル) エクセル、日々の集計整理方法。(再送です。) 5 2022/10/02 00:19
- カップル・彼氏・彼女 高校生男子です。恋愛についての質問です。 今彼女とは10ヶ月目なのですが最近、価値観の違いでの言い合 3 2023/04/22 08:25
- 電子マネー・電子決済 PayPayの決済システムのバグについて ご意見宜しくお願いします。 お尋ね致します。 私はスーパー 14 2022/08/13 21:05
- MySQL うまくいきません教えてくださいお願いしますSQLです。クエリ構文です。 1 2023/07/07 12:39
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンメニューで、選択項...
-
HTMLのoptionタグ部分に画像を...
-
前ページのリンクからフォーム...
-
【プルダウンメニュー】フレー...
-
送信ボタン押下時に値が未入力...
-
1つのformで複数のactionを実...
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
お問い合わせフォームの送信後...
-
formなしでPOSTデータを送信・受信
-
入力フォームの javascript で ...
-
パスワードをIPする際見えな...
-
同じnameのhiddenで別々の内容...
-
フォーム要素以外にもname属性...
-
インフォシーク翻訳リクエスト...
-
formについて
-
今日の日付をセットしたいのですが
-
HTMLのフォームタグの送信順に...
-
HTMLファイルに、文字を書き込...
-
携帯メールからhtmlをメールで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのoptionタグ部分に画像を...
-
プルダウンの切り替えについて
-
プルダウンメニュー項目のフォ...
-
<SELECT>タグでの selected 状...
-
セレクトボックスの幅をプルダ...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ設けて選...
-
セレクトボックスを切り替える...
-
jQuery要素の絞り込み + <selec...
-
複数のプルダウンの値をパラメ...
-
プルダウンを2つ以上並べる時に...
-
プルダウンメニューアイテムの...
-
HPビルダー9で、プルダウン形...
-
リストボックス全選択について
-
プルダウンメニューで、選択項...
-
複数のプルダウンからリンクす...
-
複数のプルダウンメニューの設...
-
子ウインドウを開く際、フォー...
-
VB6.0でコントロール配列の配列...
-
プルダウンでリンク先へいくと...
おすすめ情報