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


20 комментариев:

  1. Столько знаний...Наступит день, займусь разбором всего,что уже удалось узнать от Вас.

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

      Удалить
  2. Каждый вариант интересен по-своему.
    Я, как и ты, считаю, что такие штуки могут раздражать посетителей. Но многим нравится их использовать, это да..

    ОтветитьУдалить
    Ответы
    1. Да, Наталья. Но кому-то нужно. все мы разные и это здорово.

      Удалить
  3. Отлично работает, успехов вам!

    ОтветитьУдалить
  4. При переходе на другую страницу вновь появляется, как-то возможно доработать код?

    ОтветитьУдалить
    Ответы
    1. Антон, В ближайшее время отпишусь. Код немного поменять нужно.

      Удалить
  5. Доброго времени суток Вика! А как можно модальное окно "привязать" к меню, т.е. при нажатии на форму обратной связи в меню, будет появляться окно с формой подписки? у меня в тестовом блоге вертикальное меню слева probtestez.blogspot.ru. С уважением Тата.

    ОтветитьУдалить
  6. С этими вариантами не сделать. Как вариант возьмите код здесь на блоге. Я убрала такой-бесит посетителей. Но если вам очень нужно.
    http://postupenjkamuspexa.blogspot.ru/2015/05/blogger.html

    ОтветитьУдалить
  7. Вика, спасибо за рекомендацию, может я не точно выразилась, это модальное окно мне нужно чтобы оно появлялось ТОЛЬКО при нажатии иконки "письмо" в меню, а не при входе на страницу, такие появляющиеся окна меня тоже не устраивают.

    ОтветитьУдалить
  8. Вика, у вас подсмотрела, что можно на отдельной странице эту форму обратной связи сделать, мне это даже интересней и ее можно "привязать" к меню. Из предложенного вами "форма связи с Google Docs для блога" более адаптирована к блоггер? С уважением Тата.

    ОтветитьУдалить
  9. Тата, я поняла, что Вы хотели сделать. Но так не получится через меню. А форма связи от Google Docs вполне хорошая.
    Вот на блоге Олеси мы её вообще выдвижную сделали. Посмотрите там справа конвертик http://corolesja.blogspot.ru/2016/09/pro-detej.html

    ОтветитьУдалить
  10. Доброго времени суток Вика! Хороший вариант с выдвижной панелью! Надо подумать как ее применить! Вы молодцы! Подключила гаджет в блоггере (форма связи), создала страницу для написания письма. и вот что получилось probtestez.blogspot.ru/p/kontakt.html, правда еще не проверяла как он работает, да еще не разобралась как это делать! С уважением Тата.

    ОтветитьУдалить
  11. P.S.Вика, пожалуйста подскажите как можно сократить расстояние между этими рамками (поле ввода имени до эл.почты и сообщения) весь день опять промучилась с этими расстояниями, пробовала margin добавить, не получилось! С уважением Тата.

    ОтветитьУдалить
  12. Тата, поиграйтесь со всеми значениями padding в коде. Почитайте здесь.
    http://wm-azbook.ru/index.php/svoystva-css/svoystvo-padding-vnutrennie-otsupy.html

    ОтветитьУдалить
  13. Вика, преогромнейшая вам благодарность за наставничество, все получилось, с вашей помощью! И за ссылку на сайт, очень полезно и есть понимания, что делать, а не как слепой котенок тыкаться в кодах. Вика подскажите, а как вы формируете и оформляете содержание вашего блога? Вручную? Все предлагаемые карты сайта у меня не получаются вставить! Извините этот вопрос наверно надо было под другой статьей написать! С уважением Тата.

    ОтветитьУдалить
  14. Tata, Всегда получится всё и здесь действительно нужно понимание того, что делаешь. Насчёт карты. Я в своё время перепробовала все известные варианты и все слетали периодически. Но и самое главное здесь, что когда опубликовано более 150 постов старые посты вылетают. У меня таким образом потом вылетели все публикации за 13 год. Сейчас я делаю всю ручками. Публикую пост и сама вношу в содержание. Кстати, читала что така лучше для ПС.

    ОтветитьУдалить
  15. Вика, спасибо за ответ, придется тоже ручками начинать комплектовать содержание. Не хочется сюрпризов! С уважением Тата.

    ОтветитьУдалить
  16. так что там с доработкой кода, что бы он не вылазил после каждого обновления страницы?

    ОтветитьУдалить
    Ответы
    1. Ой, я уже и забыла про это. Вообще на эту тему уже столько написано. посоветую у driver посмотреть полную коллекцию всяких окон http://dbmast.ru/kollekciya-modalnyh-okon-i-form
      или здесь http://dbmast.ru/sozdaem-vsplyvayushhee-okno-pri-zagruzke-sajta-s-pomoshhyu-css3-i-nemnogo-javascript/comment-page-2

      Удалить

Пользовательский поиск
Foto Saya
My Photo