Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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



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

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

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

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

Код:

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

<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 в 13:28.
Alex870 вне форума   Ответить с цитированием
Старый 13.08.2015, 20:09   #2
Alex870
 
Аватар для Alex870
 
Регистрация: 13.08.2015
Сообщений: 4
Репутация: 10
По умолчанию

Решено.
Перенес 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 вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
форма обратной связи в модальном окне 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 18:04




22:35.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru