ZorNet.Ru — сайт для вебмастера » HTML и CSS » Всплывающее окно при закрытии страницы на CSS

Всплывающее окно при закрытии страницы на CSS

Функция появление модального окна с информацией при действии, когда пользователь сайта или гость хочет выйти с ресурса, где оно появляется. Безусловно вы встречали на разных интернет площадках, их основном веб мастера задействуют, при входе на портал, где прописывают свой группы, вообще все что связано социальными ресурсами. Что не говорите, но такие окна несут свои плюсы и безусловно минусы.

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

Разговаривая с одни веб мастером, у которого такое окно стоит, только немного дизайн другой. Так ему изначально стали писать, чтоб убрал, а то посещаемости не будет. Но он сделал так, что разместил актуальную и оригинальную информацию, и кто говорил, что пока не уберет, не будет заходить. А нет, вижу его на сайте, так как не крути, а информация намного дороже одного клика.

Приступаем к установке:

HTML

Код

<div id="devicesa-goodidea">
<div id="smallera-backgrou">
<span class="mensionis-kexcessiv" onclick="document.getElementById('devicesa-goodidea').style.display='none'; return false;">X</span>
<h4>Здесь заголовки</h4>
Окно, которое будет появляться при закрытие страницы, а также при выходе сайта, вообщем при наведение функций на браузере.
</div>
</div>

CSS

Код

#devicesa-goodidea {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(132, 126, 126, 0.67);
  text-align: center;
  z-index: 9999;
}

#devicesa-goodidea::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: '';
}

#smallera-backgrou {
  padding: 35px 8px 8px;
  min-height: 195px;
  max-width: 438px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  text-align: center;
  background: #354ece;
  color: #f0f1eb;
  text-shadow: 0 1px 0 #5f5c5c;
  border-radius: 3px;
  border: 3px solid #f9f1f1;
}

#smallera-backgrou h4{
margin:0;
text-align:center;
font-size:17px;
}

.mensionis-kexcessiv {
  display: block;
  position: absolute;
  background: #0e2456;
  top: 0;
  left: 50%;
  margin-left: -24px;
  line-height: 24px;
  font-weight: bold;
  width: 53px;
  height: 27px;
  text-align: center;
  color: #f7f3f3;
  cursor: pointer;
  -webkit-border-bottom-left-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -moz-border-radius-bottomleft: 50px;
  -moz-border-radius-bottomright: 50px;
  border-bottom-left-radius: 75px;
  border-bottom-right-radius: 75px;
}

.mensionis-kexcessiv:hover {
  background: #32f71c;
  color: #3a3838;
}

Код

$(document).mouseleave(function(){$('#devicesa-goodidea').show();});

Это модальное окно использует jQuery, где необходимо подключить библиотеку, если она у вас не подключена. Основном ставят вверх сайта сайта или закрывающимся head, а также можно задействовать низ ресурса и прописать перед закрывающимся body.

Скрипт:

Код

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

На этом вся установка.

Демонстрация

19 Августа 2018 Просмотров: 2209 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 2
Порядок вывода комментариев: -SAM- 19 Августа 2018 02:06¹ +1 Если разобраться, то на CSS здесь, как и во всех случаях - внешняя составляющая, функции же на JS... вот и не ясно зачем в таких материалах каждый раз акцент делать, что на CSS. UPD.: тут не вопрос оригинальности названия, а вопрос того чего оно на самом деле (такое название материала было бы оправдано, если бы всё сделано было посредством CSS и без применения JS... а так слова "на CSS" - именно что для флуда). Да и сама кнопка закрытия окна - и то не на CSS, а повесили функцию на onclick (думаю, что можно было бы иначе сделать, но цели такой не было, поскольку само внешнее оформление - переделка вот этого). В нашем случае из материала этого можно почерпнуть именно функцию на JS (кто не знал к чему привязать, чтобы было по выходе с сайта... как пример, я вот чего-то нового узнал, типо как сделать Уведомление при закрытии страницы... если я правильно понял это... а там уж какое оно будет, в виде этого блока или иначе - можно переделать). И это бралось с другой площадки, ибо на uCoz подключать еще одну библиотеку jQuery - в ущерб сайту... это для тех написано, кто не в курсе, что на uCoz по умолчанию уже подключена библиотека jQuery системно, а ее версия выбирается непосредственно в ПУ. UPD. 2: почитал тут - с закрытием страницы это не связано вообще. Цитата wisdomweb () Код обработчика события mouseleave выполнится, когда указатель мыши будет выведен за пределы выбранного элемента. Событие mouseleave часто используется совместно с событием mouseenter. Изначально может показаться, что обработчик события mouseout делает тоже самое, что и mouseleave, но это не так. Код обработчика события mouseout, в отличие от mouseleave будет также выполнен, когда указатель мыши будет выведен за пределы любого элемента потомка выбранного элемента. Посему блок будет выводиться каждый раз, когда за границы курсор отвёл просто (что и не собирался уходить со страницы). Вот этот материал - то же, что и тут представлено, выше написал суть (просто разные варианты вывода уведомления идут, функция же одна и та же JS, к которой цепляется). В сети, если пробить "уведомление при закрытии страницы" - есть еще варианты, что более подходящие (написал вам в личку про это - можно опубликовать уже сюда). P.S.: и да, Kosten, я сразу и сказал выше - не в укор, я в разбор чего оно... это, если учесть факт того, что я сперва этот материал рассмотрел, а потом ранее опубликованный... тут просто с названием вопрос встал каким сделать, чтобы не было дублем ранее выложенного... и так уж вышло, что не совсем удачное название получилось (исходя из содержимого)... такие вот дела. Kosten 19 Августа 2018 02:12² 0 Надеюсь, что ради интереса, а не в укор. Просто здесь CSS есть, да, что могу в название указать. Второе, про мониторинге не нашел такое название, где безусловно хочется оригинальным сделать. Еще есть небольшие нюансы, но это уже полный флуд получится.