Генератор модальных/pop-up/всплывающих окон

1266 1 4 0

Оформление

Расположение окна

Центр центр

Центр центр
Верх слева
Верх справа
Низ слева
Низ справа
Верх центр
Низ центр

по вертикали:по горизонтали

Максимальная ширина

Минимальная высота

Плавность появления фона

0 - 1000

Плавность появления окна

0 - 2

Открытие и закрытие

Условие появления

По клику на элемент

Через установленное время

Селекторы

Укажите CSS-селекторы, при клике на которые будет открыто окно. Например: .btn, или #btn, или button. Можно указать несколько через запятую: .bt1, .bt2, .btn3, .container button

Задержка появления окна после открытия страницы

миллисекунд

1 секунда - 1000 миллисекунд. Перевод секунд в миллисекунды

Не показывать больше окно

После открытия окна
После закрытия окна

Окно больше не будет показано в случае выбора условия появления - "Через установленное время", при этом по клику - окно будет отображаться.

Сколько по времени больше не показвать окно

часов

Перевод суток в часы

Закрывать при клике вне окна

Контент окна

Вы можете использовать html теги

Предосмотр (перед предосмотром нажмите кнопку "Создать окно"): (на предосмотр влияют настройки только оформления)

/* Общие стили для всех окон. Если вы используете несколько окон на странице, то эти стили нужно добавить только один раз на страницу или вынести в отдельный файл для работы на всех страницах сайта.*/
.wtp-body {
  overflow-y: hidden;
}
.wtp-overlay {
  background: rgba(26, 27, 35, 0.8);
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: fixed; 
  overflow-y: scroll;
  z-index: 50004;
}
.wtp-popup {
  background: #fff;
  min-height: 300px;
  width: 100%;
  display: flex;
  z-index: 50005;
  margin: 10px;
  padding: 10px;
  position: relative;
  transition: 0s;
  opacity: 0;
  border: 1px solid #ddd;
}
.wtp-scrollable {
  display: flex;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.wtp-close {
  font-size: 35px;
  line-height: 23px;
  position: absolute;
  right: 7px;
  top: 6px;
  color: #000;
  font-weight: bold;
}
.wtp-close:hover {
  cursor: pointer;
  color: #999
}
.wtp-content {
  font-size: 15px;
  margin: 15px;
  width: 100%
}
.wtp-visible .wtp-popup {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" id="jquery"></script>

<script>
jQuery(function($) {
  $body = $('body');
  //установка куки
  function wtpSetCookie(name, value, hours) {
    var d = new Date();
    d.setTime(d.getTime() + (hours * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
  }
  //получение куки
  function wtpGetCookie(name) {
    var cookies = document.cookie.split("; ");
    for(var i = 0; i < cookies.length; i++) {
      var cookie = cookies[i].split("=");
      if(cookie[0] === name) {
        return cookie[1];
      }
    }
    return null;
  }
  //установка куки для окна
  function wtpSetCookiePopup($overlay, type) {
    var id = $overlay.attr('id'),
      cookie = $overlay.data('cookie'),
      hour = $overlay.data('hour');
    if(!wtpGetCookie(id) && cookie == type && hour && hour !== undefined) {
      wtpSetCookie(id, 1, hour);
    }
  }
  //закрытие окна
  function wtpPopupHide() {
    var $visible = $('.wtp-visible'),
	 fadeOut = $visible.data('fadein'),
	 fadeOut = (fadeOut !== undefined) ? fadeOut : 0;
	  wtpSetCookiePopup($visible, 'open');
    $visible.fadeOut(fadeOut, function() {
      $body.css({
        'overflow-y': 'auto',
        'margin-right': 0
      });
    }).removeClass('wtp-visible');
  }
  //закрытие по клику вне блока
  function wtpPopupHideOutside(e) {
    var $overlay = $('.wtp-visible');
    var $popup = $overlay.find('.wtp-popup');
    if($overlay.data('outside') && !$popup.is(e.target) && $popup.has(e.target).length === 0) {
      wtpPopupHide();
    }
  }
  //открытие окна
  function wtpPopupShow($overlay) {
    var scrollbarWidth = window.innerWidth - $body.width();
      fadeIn = $overlay.data('fadein'),
	  fadeIn = (fadeIn !== undefined) ? fadeIn : 0;
      $overlay.fadeIn(fadeIn,function() {
      $overlay.addClass('wtp-visible');
    });
    $body.css({
      'overflow-y': 'hidden',
      'margin-right': scrollbarWidth + 'px'
    });
  }
  //поиск всех окон
  function wtpPopup() {
    var $overlay = $(this),
      click = $overlay.data('click'),
      timer = $overlay.data('timer'),
      id = $overlay.attr('id');
    if(click && click !== undefined) {
      $body.on('click', click, function(e) {
        e.preventDefault();
        wtpPopupShow($overlay);
      });
    }
    if(timer && timer !== undefined) {
      if(!wtpGetCookie(id)) {
        setTimeout(function() {
          wtpPopupHide();
          setTimeout(function() {
            wtpPopupShow($overlay);
            wtpSetCookiePopup($overlay, 'close');
          }, 400);
        }, timer);
      }
    }
  }
  $body.mouseup(wtpPopupHideOutside);
  $body.on('click', '.wtp-close-trigger', wtpPopupHide);
  $('.wtp-overlay').each(wtpPopup);
});
</script>

Код для встраивания на сайт:

Генератор модальных окон для сайта может быть полезен в следующих случаях:

Рекламные и маркетинговые цели: Вы можете использовать модальные окна для привлечения внимания пользователей и продвижения своих товаров или услуг. Например, вы можете создать всплывающее окно с предложением скидки, подписки на рассылку или акционным предложением.
Оповещения и сообщения: Вы можете использовать всплывающие окна для отправки важных сообщений вашим пользователям, таких как информация о важных обновлениях или уведомления о технических работах.
Формы обратной связи: Вы можете создать pop-up окно с формой обратной связи, чтобы пользователи могли отправить вопросы, комментарии или жалобы без необходимости покидать страницу.
Уведомления о файловых загрузках: Если у вас на сайте есть файлы для скачивания, вы можете использовать модальные окна для показа уведомления, когда пользователь нажимает на ссылку скачать, чтобы предложить сохранить файл или открыть его непосредственно.
Уведомления о файлах cookie: Вы можете создать окно, чтобы оно появлялось сразу после загрузки страницы с уведомлением о куках, а дополнительные опции позволят больше не показывать это уведомление.

Основные возможности:

Настройка высоты и ширины окна.
Размещение нескольких окон на странице с разным оформлением и условиями отображения и скрытия.
Настройка позиции окна.
Условия появления: по клику или автоматически через установленное время.
Блокировка повторного всплытия окна.

Комментарии

Не работает

Рома 07.11.2024

Ответить

Добавить комментарий

Сообщения ошибках, пожелания по улучшению инструмента и т.д. оставляйте в комментариях.