時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

IEでモーダル IE z-index がうまくいかないとき (自作ポップアップの元・自作ダイアログの元)

ダイアログやポップアップ(以降<pop>)を出すさい、

 

<pop>のz-indexを最大にし、その背景を<div>要素などで表現すると

<pop>は操作できるのに、ほかの要素が操作できない!

というモーダルな<pop>ができます。

 

背景

<div class="pop-back" style="z-index: 9000; display: none; position:absolute; top: 0; left: 0; width: 1300px; height: 800px;"></div>

 

<pop>

<div class="my-popup ui-corner-all" style="display:none; position: absolute; top: 300px; left: 300px; width: 300px; height: 200px; background-color: white; color: black; z-index: 10000; border: 3px solid #000;">

hogehoge<br>

hogehoge

</div>

 

こんな感じ。

 

まぁ、本当は背景<div>のサイズはjsとかでWindow Size取得して設定してやった方がいいですね。

 

ってか、CSSファイルを別途作りましょうねw

 

これでjsでボタンを押したら両方表示されるようにすればいいです!

そして、背景がクリックされたら両方隠せばいいでしょう。

 

思い通りに動いた・・・

しかし、IE10では背景の後ろにある要素が指定できるではありませんか!

他のバージョンのIEは・・・知りません。

 

なぜ?

 

IEのz-index問題?

 

違いました。

 

背景の<div>の中身はありません。

IEで中身がない場合。

ホントに透過します。

・・・すべて透過します。

 

ちょっと悩みましたよ。

 

ってなことで、

背景の<div>に

 background-color: #333; opacity: 0;

を追加

背景の色を追加し、完全透過!

ま、色はなんでもいいんですけどね。

 

opacityを0.5くらいにすると、なんか「後ろは操作できませんよ!」って強調されてるようで逆にいいかもしれません。

 

ってことで、私の壁はz-index問題ではなくて

「<div>の背景に何もしてなければIEでは、完全透過!問題」

でした。

 

何かの役に立てればいいですね。