<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Модальное окно
13.10.2012 14:55:39 Модальное окно Сообщение #1
bo4kov

bo4kov

Продвинутый

Продвинутый

Дата регистрации:
11.06.2012 11:21:31

Сообщений: 63

Я создал себе модальное окно с помощью css, а оно не отображается в IE, в других браузерах работает нормально. Как сделать, чтобы работало в IE?

Вот код HTML:

<a href="#openModal">Открыть модальное окно</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<h2>Модальное окно</h2>
<p>Прмер простого модального окна, которое может быть создано с использованием CSS3.</p>
<p>Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.</p>
</div>
</div>


Вот код CSS:

.modalDialog {
position: fixed;
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:target {
display: block;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
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);
}

.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; }
Профиль Ответить
13.10.2012 19:56:43 Модальное окно Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Псевдокласс :target IE не поддерживает.
Профиль Ответить
13.10.2012 22:57:18 Модальное окно Сообщение #3
bo4kov

bo4kov

Продвинутый

Продвинутый

Дата регистрации:
11.06.2012 11:21:31

Сообщений: 63

А как мне сделать по другому, что бы работало в IE? Чем можно заменить?
Профиль Ответить
14.10.2012 21:32:01 Модальное окно Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Совсем без javascript, скорее всего, не получится. Придется менять состояние окна (display) через него.
Профиль Ответить
15.10.2012 16:45:44 Модальное окно Сообщение #5
bo4kov

bo4kov

Продвинутый

Продвинутый

Дата регистрации:
11.06.2012 11:21:31

Сообщений: 63

можете привести пример кода?
Профиль Ответить
15.10.2012 19:41:30 Модальное окно Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

document.getElementById('modal1').style.display = 'block';
"modal1" это id того самого окна, которое по умолчанию не отображается, так как display стоит none. Сам код можно вызывать по onclick(), например.
Профиль Ответить