Internet Explorer, z-index и «модальность» - PullRequest
Новая
       24

Internet Explorer, z-index и «модальность»

0 голосов
/ 22 марта 2011

Следующее в Firefox 3.6 имитирует модальное наложение: 

<html>
<body>

    <div id="modal" style="position: fixed; 
        top: 0; left: 0;right: 0; bottom: 0;
        background: rgba(255,0,0,0.5);
        z-index: 10;">

        <div style="border-style:solid;border-width:5px;
                    position: fixed;top: 50%;left:50%">
           <h2>I am modal</h2>
           <form><input type=submit></form>
         </div>
    </div>


    <div id="notModal" style="height:500px;
                              border-style:solid;border-width:5px;">
        <div>
            <h2>a I am not modal</h2>
            <p>lorem ipsit dolar foo bar baz</p>
            <form><input type=submit></form>
        </div>
    </div>
</body>
</html>

В частности, можно выбрать текст в «модальном» div, а также нажать кнопку «Отправить» в «модальном» div, но ничего в «notModal» div нельзя выделить или щелкнуть.

В Internet Explorer 8 это не так; текст notModal может быть выделен, а отправка notModal может быть заблокирована.

Есть ли способ заставить это работать под различными версиями IE, без использования javascript?

Спасибо.

Ответы [ 2 ]

4 голосов
/ 22 марта 2011

В IE много проблем с прозрачностью (он не поддерживает rgba). Есть также известные проблемы с z-индексацией.

Попробуйте что-то вроде это .

Примечания:

  • Большинство проблем с z-индексами IE можно исправить, применяя z-индексы к родительским элементам элементов, для которых вы пытаетесь задать z-index.
  • Я переместил модальное окно из элемента cover (ранее modal), чтобы IE не пытался применить к нему фильтр.

Пример
HTML 

<div id="cover"></div>
<div id="modalbox">
   <h2>I am modal</h2>
   <form><input type=submit></form>
 </div>

<div id="notModal">
    <div>
        <h2>a I am not modal</h2>
        <p>lorem ipsit dolar foo bar baz</p>
        <form><input type=submit></form>
    </div>
</div>

CSS 

body {
    z-index: 1;
}
#cover {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter:alpha(opacity=50); /* Only applies to IE */
    background: red; /* This will be overwritten by browsers that support rgba */
    background: rgba(255,0,0,0.5); /* IE ignores this since it's not supported */
    z-index: 10;
}
#modalbox {
    border:solid 5px #ccc;
    position: fixed;
    top: 50%;
    left:50%;
    z-index: 20;
}
#notModal {
    height:500px;
    border:solid 5px #ccc;
    z-index: 5;
}
2 голосов
/ 22 марта 2011

IE не распознает цвет rgba, попробуйте использовать rgb и используйте фильтр: alpha (opacity = 50)

...