Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.08.2015, 09:47   #1
Alex870
 
Аватар для Alex870
 
Регистрация: 13.08.2015
Сообщений: 4
По умолчанию Анимация на модальном окне

Доброго времени суток, форумчане!

Стоит такая задача:

Пользователь загружает на сайт файл, который нужно конвертировать и загрузить в БД. Пока всё это происходит мне нужно огрничить ползователя в действиях. Использую модальное окно:

Код:
     <!-- Задний прозрачный фон-->

<div id="wrap"></div>

     <!-- Само окно-->

<div id="window" >

 

<h1>Пожалуйста подождите</h1>

<br/>

<img width="200px" src = "images/loading.gif">

<br>

<br>

Выполняются операции <br>

<div>

конвертирования и загрузки информации в базу данных.

</div> 

</div>


Для показа и скрытия окна использую функцию:

Код:
<script type="text/javascript">

     //Функция показа
   function show(state){

     document.getElementById('window').style.display = state;  
     document.getElementById('wrap').style.display = state;
     document.getElementById('wrap').style.readonly = "readonly";
   }
   
</script>
CSS:
Код:
#wrap{
		display: none;
		opacity: 0.8;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
		background-color: rgba(1, 1, 1, 0.725);
		z-index: 100;
		overflow: auto;
	}
	
#window{
		width: 400px;
		height: 170px;
		margin: 50px auto;
		display: none;
		background: #fff;
		z-index: 200;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
		text-align: center;
        border-radius: 10px;

	}
Всё вроде прекрасно работает, но в IE (8...11) не отображается анимация GIF'а. В других браузерах всё нормально. Причем если gif вставить на основную страницу - он работает, а вот на модальной форме, при изменении свойства display - происходит "зависание". Т.е. Gif отображается, но не анимированный. Как выйти из этой ситуации? Спасибо.

Последний раз редактировалось Alex870; 13.08.2015 в 12:28.
Alex870 вне форума Ответить с цитированием
Старый 13.08.2015, 19:09   #2
Alex870
 
Аватар для Alex870
 
Регистрация: 13.08.2015
Сообщений: 4
По умолчанию

Решено.
Перенес html код в JS. Вот так:
Код:
function show(state){
                    document.getElementById('window').innerHTML = '<h1>Пожалуйста подождите</h1><br/><img width="200px" src = "images/loading.gif"><br><br>Выполняются операции <br><div>конвертирования и загрузки информации в базу данных.</div>';
					document.getElementById('window').style.display = state;		
					document.getElementById('wrap').style.display = state;
					document.getElementById('wrap').style.readonly = "readonly";
			}
А создание div'а оставил в html.
Alex870 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
форма обратной связи в модальном окне Zugelman JavaScript, Ajax 1 12.10.2014 02:28
Регистрация пользователей в модальном окне alnik-75 PHP 2 12.02.2012 20:01
Проблема с (авторизация в модальном окне) Vitaliy> JavaScript, Ajax 5 20.07.2011 07:14
Вывод результата работы скрипта в модальном окне snikers987 JavaScript, Ajax 2 06.06.2011 23:27
Вопрос по Wordpress: Видео в модальном окне. m_hamlet WordPress и другие CMS 0 10.01.2011 17:04