Error message

User warning: The following theme is missing from the file system: responsive_green. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /var/www/moscovie.com/includes/bootstrap.inc).

Простое модальное окно с таймером на закрытие

HTML Структура окна


CSS

#modal_form {
width: 300px;
height: 300px; /* Размеры должны быть фиксированы */
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed; /* чтобы окно было в видимой зоне в любом месте */
top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
left: 50%; /* половина экрана слева */
margin-top: -150px;
margin-left: -150px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
display: none; /* в обычном состоянии окна не должно быть */
opacity: 0; /* полностью прозрачно для анимирования */
z-index: 5; /* окно должно быть наиболее большем слое */
padding: 20px 10px;
}
/* Кнопка закрыть для тех кто в танке) */
#modal_form #modal_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
/* Подложка */
#overlay {
z-index: 3; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
position: fixed; /* всегда перекрывает весь сайт */
background-color: #000; /* черная */
opacity: 0.8; /* но немного прозрачна */
width: 100%;
height: 100%; /* размером во весь экран */
top: 0;
left: 0; /* сверху и слева 0, обязательные свойства! */
cursor: pointer;
display: none; /* в обычном состоянии её нет) */
}


Скрипт

$(document).ready(function() { // вся магия после загрузки страницы
$('a#go').click( function(event){ // ловим клик по ссылки с id="go"
event.preventDefault(); // выключаем стандартную роль элемента
$('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
function(){ // после выполнения предъидущей анимации
$('#modal_form')
.css('display', 'block') // убираем у модального окна display: none;
.animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
});
});
/* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
$('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
function(){ // после анимации
$(this).css('display', 'none'); // делаем ему display: none;
$('#overlay').fadeOut(400); // скрываем подложку
}
);
});
});


Таймер - окно закроется через 5 секунд

setInterval(function() {
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
function(){ // после анимации
$(this).css('display', 'none'); // делаем ему display: none;
$('#overlay').fadeOut(400); // скрываем подложку
}
);
}, 5000);

Категория: 
The code has been tested and works
Мультитег: 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.