Перейти к содержимому


Добро пожаловать к нам на сайт! Про Ваш статус и права можно прочитать в Этой теме

Для просмотра картинок и скачивания файлов с форума - пройдите регистрацию!   Проблемы с регистрацией - вам сюда


Фотография

Красивое окно откроется после загрузки страницы


  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1
RUS_D

RUS_D

    Главный АДМИН

  • Не в сети
  • Тех. Админ
  • админ Администратор
  • Старожил сайта
<- Информация ->
  • PipPipPipPip
  • Регистрация:
    08-December 08
  • 4561 Cообщений
  • Пропуск №: 2


Репутация: 7003 Постов: 4561
  • Skype:rus_did
  • Страна проживания:Украина
  • Реальное имя:Руслан
  • Пол:Мужчина
  • Город:Полтавская обл.


Содержимое окна может быть самым разным,оно откроется после загрузки страницы после указанного Вами времени.Время открытия окна после загрузки установлено на 2 секунды (var delay_popup = 2000;) в скрипте.Окошко неплохо оформленно свойствами CSS3,без применения дополнительных скриптов что делает его более лёгким при загрузке страницы.В примере содержимого окна используется модифицированные стили,само окно было сделано для информирования пользователей заходящих на сайт с браузера Internet Explorer.

Код
<style>
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: ;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
/* Размер окна */
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h4{
/* Шрифт заголовка */
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #008000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h5{
/* Шрифт заголовка */
font:24px Monotype Corsiva, Arial;
color: red;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: ;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
</style>
<div id="parent_popup">
<div id="popup">
<h4>Уважаемый ползователь IE</h4>
<p>Хотите,чтобы наш сайт в Ваших глазах отображался красиво и элегантно?</p>
<p><h5>Тогда не тяните резину !</h5></p>
<p>Срочно установите бесплатный браузер Mozila!<p>
<p style="text-align: center;">
<strong>
<a class="button" href="http://mozilla-russia.org/products/firefox/yandex/">Скачать бесплатно его можно здесь</a>
</strong></p>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='';">X</a>
</div>
</div>
<script type="text/javascript">
var delay_popup = 2000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>





яндекс.метрика
Button automatically alert search engines 31x31 WHOIS.UANIC.NAME - Identify traffic by Google

реклама на сайте подключена