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

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

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

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

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

背景

<pop>

hogehoge<br>

hogehoge

</div>

こんな感じ。

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

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

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

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

思い通りに動いた・・・

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

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

なぜ？

IEのz-index問題？

違いました。

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

IEで中身がない場合。

ホントに透過します。

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

ちょっと悩みましたよ。

ってなことで、

背景の<div>に

background-color: #333; opacity: 0;

を追加

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

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

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

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

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

でした。

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

目指せ非プログラマー