Всплывающее меню при входе на сайт. А также онлайн-консультант.
Добавил: adioz 18 мая 2013 09:41
Последний комментарий: Аноним 10 июня 2013 16:35

Добрый день!

Подскажите пожалуйста, как сделать выпадающую картинку с полями, как например на сайте laredoute.ru

Когда заходишь на сайт предлагают ввести e-mail и пароль.

Либо как на trensbrands.ru - ввести email и подписаься на новости.

 

И второе - как сделать онлайн консультанта, который будет вылазить сбоку?

Просмотры (5885)  Комментарии (9)  Форум (Помощь в работе с Fo.Ru)
ypoku 19.05.2013 в 21:06

1.Вопрос:

Для отображения именно такого же окна требуется подключение различных библиотек, чего невозможно сделать на Fo.Ru. Но есть альтернативный способ, правда окно будет выводиться всегда, при переходе на любую страницу вашего сайта и это нельзя будет отключить, например, подписавшись или зарегистрировавшись. Итак сам метод: вставляем код в позицию баннера

<div id="parent_popup">

<div id="popup">

Тут пишем  ваш текст.

Или вставляем HTML код.

<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>

</div>

</div>

<script type="text/javascript">

                var delay_popup = 5000;

                setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);

</script>

И добавляем стили CSS

#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: 520px;

  margin: 10% auto;

  padding: 5px 20px 13px 20px;

  border: 10px solid #ddd;

  position: relative;

  /*--CSS3 Тени для Блока--*/

  -webkit-box-shadow: 0px 0px 20px #000;

  -moz-box-shadow: 0px 0px 20px #000;

  box-shadow: 0px 0px 20px #000;

  /*--CSS3 Скругленные углы--*/

  -webkit-border-radius: 15px;

  -moz-border-radius: 15px;

   border-radius: 15px;

}

.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: 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: rgba(0, 122, 200, 0.8);

}

Вы можете прочитать более подробно об этом тут - http://dbmast.ru/sozdaem-vsplyvayushhee-okno-pri-zagruzke-sajta-s-pomoshhyu-css3-i-nemnogo-javascript

2.Вопрос:

Существует множество компаний которые предоставляют программы такого типа для вашего сайта, среди них есть бесплатные - www.jivosite.ru \ www.zopim.com \ www.pr-me.ru \ www.chathelp.ru \ www.mibew.org \ www.milservice.ru  и платные, такие как – www.redhelper.ru

aDioz 19.05.2013 в 22:47

Спасибо за информацию!

В продолжение 2 вопроса... Зарегистрировал онлайнконсультант на сайте pr-me.ru, мне дали 2 кода...

Куда мне вставлять коды эти? Их 2 штуки разные:

для первого кода написано:

"Разместите этот код внутрь тега <header> на тех страницах, где должен работать виджет
онлайн консультанта.
Внимание! Не изменяйте код, это может привести к неправильной работе или ошибке кода сайта!"

Для второго написано:

"Разместите этот код в конец шаблона страницы, на тех страницах,где должен работать виджет
онлайн-консультанта.
Внимание! Не изменяйте код, это может привести к неправильной работе или ошибке на сайте!"

Я не понимаю, куда их вставить :)

ypoku 20.05.2013 в 00:08

Оба кода необходимо установить в банерную позицию.

ypoku 20.05.2013 в 14:06

Прошу прошения, в приведенном выше коде HTML ошибочно было прописано два раза одно и то же значение <atitle="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>. что приводило к вторичному выведению кнопки закрыть, на сайте. Данная ошибка исправлена, строка с кодом удалена.

aDioz 22.05.2013 в 22:38

Спасибо за информацию, но вариант с такой картинкой на каждой странице отпадает :)) Нужен только при заходе на сайт (в идеале при заходе на любую страницу сайта впервые)

ypoku 22.05.2013 в 22:56

к сожелению тут уже все на много сложнее и силами самого Fo.Ru тут не обойтись.

zav19 27.05.2013 в 22:11
Цитата:

Добрый день!

Подскажите пожалуйста, как сделать выпадающую картинку с полями, как например на сайте laredoute.ru

Когда заходишь на сайт предлагают ввести e-mail и пароль.

Либо как на trensbrands.ru - ввести email и подписаься на новости.

 

И второе - как сделать онлайн консультанта, который будет вылазить сбоку?

Я на своем сайте http://lavryshka.ru/ сделала онлайн-консультант. Вот на этом сайте зарегистрировалась http://redhelper.ru/, получила код, вставила его туда, куда вставляем код статистики. Вроде бы пока все работает.

Nagato 10.06.2013 в 15:58

Алексей Павлович, с чего вы взяли что окно будет выходить на всех страницах? если потсавить его на ту страницу где должно вылезти окно то оно будет выходить только там, не обязательно ставить код именно в боковую колонку, например его можно поставить в блоке с произвольным html на главной(не в боковом блоке), и он будет выходить только там.

ypoku 10.06.2013 в 16:35

Nagato, речь шла об окне которое будет выводиться на любой странице сайта а этого проще добиться, поставив код в баннерную позицию. Вариант с блоком произвольного HTML вполне приемлем и мне о нем известно, также код можно поставить и на любую отдельно взятую страницу через HTML редактор. 

Спасибо за ваше высказывание!

Зарегистрированный
Анонимно
Яндекс.Метрика
© Copyright 2013 - 2017 Уроки Fo.Ru