2 варианта всплывающего (модального) окна в Blogger.

Всем доброго времени суток. По просьбе читателей делаю шпаргалку о том, как сделать всплывающее (модальное) окно на блоге. Сама я такие штучки не очень люблю. Мне кажется, что они очень мешают и раздражают посетителей. Однако, всё равно они присутствуют и несут в себе определённый функционал.


Техника создания popup окон самая разная. С использованием jQuery, JavaScript, CSS. Предложу 2 варианта совершенно простых в исполнении модальных окон. В Блоггере они просто устанавливаются через гаджет HTML/JavaScript. В них вы сможете добавить абсолютно любую информацию. Будь то баннер, текст, код. Всё, что ваша душа пожелает.

Вариант 1. Простое модальное окно, которое появляется сразу, как пользователь заходит на сайт. Пример такого посмотрите на тестовом блоге.


Для начала создадим вот такой код.

<div id='kotak'><span style="font-weight:bold;"><center>здесь заголовок</center></span><br /><br /><center>Здесь вставляем текст, код баннера, картинку и т.д 
</center>
   <a class='close' href='#'>&times;</a>
</div>

Подключаем javascript.

<script type='text/javascript'>
$(window).bind("load", function() {
    $('#kotak').animate({top:"50px"}, 1000);
 
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });
});
</script>

И зададим стили для самого окна.

<style>#kotak {
  position:fixed !important;
  position:absolute;
  top:-1000px;
  left:50%;
  width:300px;
  margin:0 0 0 -182px;
  height:auto;
  padding:16px;
  background-color:#A78E8E ;
  border:2px solid white;
  font:normal normal 1em/normal Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

#kotak a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background-color:#A78E8E ;
  font:normal bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:white;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
}</style>

Весь код полностью такой.

<script type='text/javascript'>
$(window).bind("load", function() {

 
    $('#kotak').animate({top:"50px"}, 1000);

 
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>
<style>#kotak {
  position:fixed !important;
  position:absolute; /* IE6 */
  top:-1000px;
  left:50%;
  width:300px;
  margin:0 0 0 -182px;
  height:auto;
  padding:16px;
  background-color:#A78E8E ;
  border:2px solid white;
  font:normal normal 1em/normal Georgia,Serif;
  color:#111;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

#kotak a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background-color:#A78E8E ;
  font:normal bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:22px;
  width:22px;
  text-align:center;
  color:white;
  border:2px solid white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:22px;
  -moz-border-radius:22px;
  border-radius:22px;
  cursor:pointer;
}</style>
<div id='kotak'><span style="font-weight:bold;"><center>заходите на мой блог</center></span><br /><br /><center><a href=" http://www.shpargalochki.ru/" target=_blank><img src="http://s012.radikal.ru/i320/1505/9e/3c6ed9f8ef64.jpg " title="шпаргалки блогерши " /></a>
</center>
   <a class='close' href='#'>&times;</a>
</div>

Выделенное цветом меняйте на свой вариант.

Вариант 2. Такое сейчас можно встретить на многих сайтах. Окно появляется не сразу, а с некоторой задержкой. Через определённое время, которое вы зададите. И сделаем затемнение внешнего фона. Пример посмотрите здесь. Задержитесь на несколько секунд. Весь принцип практически тот же самый. Так что сразу даю код.

<div id="parent_popup">
<div id="popup">
 Тут вставляем код . рекламу, важное сообщение и др.
  <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div>
</div>
<script type="text/javascript">var delay_popup = 6000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>

<style>
#parent_popup{
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#popup{
    background: #fff;
    width: 500px;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border: 5px solid #C18989 ;
    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: 15px;
    -moz-border-radius: 15px;
     border-radius: 15px;
}
.close{
    background-color:#C18989 ;
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    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: #F6F2F2;
}
</style>

 Число 6000 (6 секунд) это время через которой окно выскальзывает. За затемнение отвечает блок #parent_popup. Расположение самого окна можно задавать
top: 0;
    right: 0;
    bottom: 0;
    left: 0;
То, что оно остаётся при прокрутке задали положение fixed. Цветовые решения так же подбирайте свои - свойство background-color.

Вот и всё с модальными окнами на сегодня. Спасибо за внимание. И удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email