Не открывается модальное окно в IE

[xoff]

html:

<a href="#zakaz" class="buy">Заказать</a>
<div id="zakaz" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<center><h2>Оформление заказа</h2></center>
</div>
</div>

css:

.modalDialog {
position: fixed;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.modalDialog > div {
width: 700px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.modalDialog:target {
display: block;
pointer-events: auto;
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

Как решить проблему? что IE надо...

[CoDy]

Какой версии IE? Псевдоклас :target работает только на 9+. http://htmlbook.ru/css/target.

[xoff]

Какой версии IE? Псевдоклас :target работает только на 9+. http://htmlbook.ru/css/target.

7 версия, можно как нибудь малой кровью победить это? какие нибудь хаки установить?

[CoDy]

Можно по событию нажатие кнопки присваивать блоку какой-то класс, на который в CSS повесить нужные стили.

CSS

.modalDialog {
position: fixed;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog > div {
width: 700px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.modalDialog:target, .target {
display: block;
pointer-events: auto;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<a href="#zakaz" class="buy" onclick="$('#zakaz').toggleClass('target');">Заказать</a>
<div id="zakaz" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close"></a>
<center><h2>Оформление заказа</h2></center>
</div>
</div>

Если в проекте JQuery не используется, тогда можно самому написать на JS функцию-аналог toggleClass().

[xoff]

Сделал как написано хоть что-то появляется после того как нажимаю заказать, но не как модальное окно открывается, а просто спрятанный див на странице после кнопки заказать вылезиет

Вот пример работы в chrome,opera,firefox:

А вот в IE как выглядит после твоего кода:

[CoDy]

Скорее всего при навешивании дизайна на версту, CSS на IE не тестился. Если нужно чтобы во всех браузерах дизайн выглядел одинаково - нужно писать кросбраузеный "код", который учитывает все особенности каждого браузера.

Вот например border-radius IE понимает только после 9 версии. Таким образом половину из написанного в css IE 7 не понимает и выдает неожиданный для результат.

Чтобы див закрывался, нужно снимать класс target с элемента.

[npofopr]

Воспользуйтесь для модалок плагинами. Например http://fancyapps.com/fancybox/

[xoff]

Воспользуйтесь для модалок плагинами. Например http://fancyapps.com/fancybox/

Блин да что такое то, пример скаченный открываю в IE работает, когда на сайт все устанавливаю везде работает но в IE нет.... ааааааааа

[npofopr]

Ну это уже у вас какие то проблемы, в чем не знаю.

Можете еще показать сайт, возможно яснее будет.

[xoff]

Воспользуйтесь для модалок плагинами. Например http://fancyapps.com/fancybox/

На IE просто затемнение идет но окно не появляется, а в примере с того же ie все работает, где я мог ошибиться? Или еще где-то есть подводные камни? Помоги

[Николя223]

посмотри что ie в консоли пишет. Может есть че дельное

[xoff]

посмотри что ie в консоли пишет. Может есть че дельное

Где там найти консоль?

[xoff]

Покопался в средстве разработчика в IE поменял там режим документов на Стандартный IE7 или IE8 Работает нормально все, но прикол в том что на сайтах с примерами модальных окон IE нормально реагирует сразу, не меняя Режим совместимости.... в чем может быть дело.

[troll31]

нужно запретить IE уходить в режим совместимости

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

[xoff]

нужно запретить IE уходить в режим совместимости

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Отдуши!