Всплывающее окно

[VasiliyGrachev]

Добрый день!
Как настроить всплывающее окно при заходе на сайт? Есть скрипты бесплатные, либо модуль ?
Либо как вариант, у меня есть уже настроенный виджет обратного звонка, настроить функцию, что бы он автоматически всплывал при заходе на сайт?!

 

[IlyaCart]

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

[novichok1955]

В "Расширениях"  найдите  "HTML контент" ,  создайте новое расширение "виджет", (не забудьте его включить...) и впишите в него скрипт виджета обратного звонка, затем в макетах  вставьте это расширение в нужный макет  

Змінено 27 лютого 2018 користувачем novichok1955

[novichok1955]

Кстати, для этого рекомендую лучше использовать RedHelper  и RedConnect ...  менее навязчиво и вполне удобно!

[VasiliyGrachev]

13 часов назад, novichok1955 сказал:

В "Расширениях"  найдите  "HTML контент" ,  создайте новое расширение "виджет", (не забудьте его включить...) и впишите в него скрипт виджета обратного звонка, затем в макетах  вставьте это расширение в нужный макет  

мне нужно не перенести виджет, а что бы он автоматически при заходи на сайте включался сделать. Как модальное окно "popup" по моему называется

[VasiliyGrachev]

Я по скрипту сделал вот такое всплывающее окно: 

Можно как то настроить, что бы виджет за место этого окна вылазил?
Вот коды по которым настраивал: 
Это в футере прописал
<script type="text/javascript">
    var delay_popup = 3000;
    setTimeout("document.getElementById('bg_popup').style.display='block'", delay_popup);
</script>   
<div id="bg_popup">
  <div id="popup">
<h1>Пробное сообщение!</h1>
<p>Пробное сообщение пишем тут.</p>
<a class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
</div>
</div>

и css:

#bg_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: 25% auto;

padding: 5px 20px 13px 20px;

border: 2px solid #1BA600;

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{

display:block;

position:absolute;

top:-12px;

right:5px;

width:25px;

height:25px;

line-height:28px;

color:#fff;

background:#1BA600;

cursor:pointer;

-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:#f30;

}

 

[novichok1955]

Я согласен с мнением предыдущего поста о навязчивости  данного варианта всплывающего окна...

У меня ( сделано по описанному выше...) все выглядит вот так...  Есть и обратный звонок и чат! Только не навязчиво, а как ВЫБОР клиента, захочет - напишет или закажет обратный звонок.

Змінено 1 березня 2018 користувачем novichok1955

[Gamburg]

Привет всем!

Может кто подскажет, а как в примере выше сделать ссылку на такое pop-up окно, что бы при клике на ссылку вылезало такое окно.

P.S. Готовые Модули не предлагать

[iglin]

6 минут назад, Gamburg сказал:

P.S. Готовые Модули не предлагать

Ну можете в документации бутстрапа почитать как выводятся модальные окна https://getbootstrap.com/docs/4.0/components/modal/

[Gamburg]

6 minutes ago, iglin said:

Ну можете в документации бутстрапа почитать как выводятся модальные окна https://getbootstrap.com/docs/4.0/components/modal/

Благодарю, только теперь надо разобраться какая версия bootstapa стоит у меня

[iglin]

4 минуты назад, Gamburg сказал:

какая версия bootstapa стоит у меня

Стандартно в опенкарт 3 версия бутстрапа. Модете открыть файл бутстрап-мин.жс который подгружается при загрузке вашего сайта и там вверху обычно в коментах версия указана.

 

[Gamburg]

Opencart 3.0.2.0.

СSS - Bootstrap v3.1.0

JS - Bootstrap v3.3.5

[csslamm]

В 28.02.2018 в 12:01, VasiliyGrachev сказал:

Я по скрипту сделал вот такое всплывающее окно: 

Можно как то настроить, что бы виджет за место этого окна вылазил?
Вот коды по которым настраивал: 
Это в футере прописал
<script type="text/javascript">
    var delay_popup = 3000;
    setTimeout("document.getElementById('bg_popup').style.display='block'", delay_popup);
</script>   
<div id="bg_popup">
  <div id="popup">
<h1>Пробное сообщение!</h1>
<p>Пробное сообщение пишем тут.</p>
<a class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
</div>
</div>

и css:

#bg_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: 25% auto;

padding: 5px 20px 13px 20px;

border: 2px solid #1BA600;

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{

display:block;

position:absolute;

top:-12px;

right:5px;

width:25px;

height:25px;

line-height:28px;

color:#fff;

background:#1BA600;

cursor:pointer;

-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:#f30;

}

 

как сделать вызов этого окна

[OCdevWizard]

27 минут назад, csslamm сказал:

как сделать вызов этого окна

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