Как сделать всплывающую картинку при уходе с сайта.

Иногда владельцы блогов хотят добавить некоторую интерактивность своим сайтам и сделать появляющиеся картинки, когда посетитель покидает сайт.

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

Я взял простой пример, с всплывающей картинкой, которая будет показываться только тогда, когда курсор пользователя будет покидать окно страницы.

Код очень простой и работает в chrome, firefox, opera.

Вам только остается загрузить свою картинку в ваш блог, получить её адрес и поменять его вот в этой строке:

image.src='http://www.beautifulady.it/wp-content/uploads/2017/10/2bl.jpg';

То, что внутри одинарных кавычек - там должен быть url вашей картинки.

Теперь, идем в Шаблоны ->Добавить гаджет -> HTML & JavaScript Смотрите на картинке:

Не забудьте поместить скопированный код внутрь тегов <script></script> !!! Это важно!!!

  function addEvent(obj, evt, fn) {
   if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
   }
   else if (obj.attachEvent) {
    obj.attachEvent("on" + evt, fn);
   }
  }
  addEvent(window,"load",function(e) {
   addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {

     var block=document.createElement('div');
     block.id='popup';
     var image=document.createElement('img');
     image.src='http://www.beautifulady.it/wp-content/uploads/2017/10/2bl.jpg';
     block.appendChild(image);
     var obj=document.querySelector('body');
     obj.appendChild(block);
     document.getElementById('popup').style.display="block";
     setTimeout(function() {
      document.getElementById('popup').style.display="none";
     }, 2000);
    }
   });
  });

Я сделал так, чтобы картинка показывалась только на короткое время - 2 сек. Вы можете изменить это по своему желанию, или отменить совсем. Для этого вам нужно изменить вот этот участок кода:

     setTimeout(function() {
      document.getElementById('popup').style.display="none";
     }, 2000);

Можно, или убрать функцию setTimeout совсем (оставив только среднюю строку), или изменив время (2000 миллисекунд = 2 сек), на более подходящее.

Теперь, осталось только добавить код CSS в ваш шаблон. Его вы можете изменить по собственному желанию таким образом, чтобы ваша картинка была оформлена соответствующим образом.

Для того, чтобы представлять, как и что вам оформлять, вам стоит понимать, что JS-кодом выше, мы создаем внутри документа новый div с id="popup" и внутри него тег img c url вашей картинки.

<div id="popup">
    <img src="адрес вашей картинки">
</div>

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

Идем как на картинке: Тема -> Настроить -> Продвинутые настройки -> Добавить CSS

  #popup {
   position: fixed;
   top: 30%;
   right: 40%;
   display: none;
  }
  #popup img{
   width: 100%;
  }

Не забывайте сохранить изменения.

Все!
Таким образом вы получите всплывающую картинку перед уходом пользователя с сайта.

Работающий пример можно посмотреть здесь: для блога Тренировка

---

Иногда бывает нужно остановить исчезновение картинки по клику.
Код ниже остановит исчезновение картинки, ровно до того момента пока курсор не покинет вновь поле документа.

Красным отметил изменения от вышеприведенного кода.

  function addEvent(obj, evt, fn) {
   if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
   }
   else if (obj.attachEvent) {
    obj.attachEvent("on" + evt, fn);
   }
  }

  addEvent(window,"load",function(e) {

   addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;

    if ( !from || from.nodeName == "HTML" ) {
     
     var block=document.createElement('div');
     block.id='popup';
     var image=document.createElement('img');
     image.src='http://www.beautifulady.it/wp-content/uploads/2017/10/2bl.jpg';
     block.appendChild(image);
     // var obj=document.getElementById('img_container');
     var obj=document.querySelector('body');
     obj.appendChild(block);

     document.getElementById('popup').style.display="block";
     
var tm = 
setTimeout(function() {
      document.getElementById('popup').style.display="none";
     }, 2000);

     
document.addEventListener("click",function(){
      clearTimeout(tm);
     });
     
   }
    
   });

  });

---

UPDATE

Предупреждение перед выходом веб-страницы с помощью JavaScript - jQuery

Во-первых, я хотел бы сказать, что во многих случаях выясняется, что пользователи по ошибке нажимают ссылку на веб-страницу или закрывают текущую вкладку по ошибке. Здесь я покажу вам, как предотвратить эту ошибку, добавив предупреждающее сообщение или предупреждающее сообщение с использованием JavaScript или jQuery.

Предупреждение перед выходом страницы в JavaScript - jQuery

 <script type="text/javascript">
 $(window).on('beforeunload', function(){
 var c=confirm();
 if(c){
 return true;
 }
 else
 return false;
});
</script>

Что делает вышеупомянутый скрипт на jQuery?

Если вы используете этот JavaScript на своей веб-странице, он выдает предупреждающее сообщение перед тем, как покинуть эту страницу.

Кроме того, если вы нажмете на ссылку или щелкните по чему-то, что будет перемещаться от веб-страницы, оно также предложит вам.

Ниже я предоставляю полный пример, чтобы вы могли его правильно понять.

 <!DOCTYPE html>
 <html>
 <body>


 <a href="https://google.com">Google</a>


 <script type="text/javascript">
 $(window).on('beforeunload', function(){
 var c=confirm();
 if(c){
 return true;
}
else
return false;
});
</script>

</body>
</html>

Более ранние версии браузеров позволяли вам установить настраиваемые сообщения в диалоговом окне оповещения, но теперь это невозможно. Для того, чтобы их установить нам требуется подключить библиотеку jQuery По CDN -

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script >

Или вы можете просто загрузить jquery.min.js и включить это.

Теперь просто протестируйте его в своем браузере.

Если вы нажмете на ссылку google, она предложит вам.

Ниже приведен снимок экрана с предупреждающим сообщением

Если вы попытаетесь закрыть текущую вкладку, появится одно и то же сообщение.