Всплывающее окно с затемнением и размытым фоном jQuery

Добрый день. В этом уроке я расскажу как сделать простое всплывающее окно с затемнение и размыванием фона. Причем для DLE я покажу пример как сделать размытие для всех окон в системе включая системные.

Шаг 1. Подключаем стили

Вставьте эти стили в файл стилей вашего шаблона

.box_window{
  width:700px;
  position:fixed;
  top:15%;
  left:50%;
  margin-left:-350px;
  z-index:11;
  background: #fff;
  display:none;
  padding:20px;
}
.box_window_in {
  position: relative;
  overflow-y:auto;
}
.box_title {
  position: absolute;
  left: 0px;
  top: -30px;
  color: #fff;
}
.bw_close{
  position:absolute;
  top: -25px;
  font-size: 10px;
  color: #fff;
  right:0px;
  cursor:pointer;
  z-index: 2;
}
.mask{
  position:fixed;
  background:rgba(0, 0, 0, 0.38);
  display:none;
  height:100%;
  width: 100%;
  z-index:10;
}
.to_blur.blur {
 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);
}

Шаг 2 Вставим код окошка

Откройте шаблон главной страницы сайта и найдите тег

</body>

перед ним вставьте

<div id="1" class="popwindow" data-title="Супер заголовок" data-height="150">содержание всплывающего окна</div>

Шаг 3 Вставим кнопку по клику на которую будет показываться наше окно

В нужное место вставьте

<div class="popbutton" data-window="1">Нажми на меня полностью</div>

где «1» это ID блока с содержимым окна

 Шаг 4 Эффект размытия и затемнение

Откройте шаблон главной страницы и найдите тег

<body>

После него вставьте

<div class="to_blur">

Далее найдите код

<div id="1" class="popwindow" data-title="Супер заголовок" data-height="150">

Да, да это именно код окна которое мы вставили ранее. И перед ним вставьте тег

</div>

Шаг 5 Подключаем чудо скрипт и радуемся

Загрузите скрипт с помощью FTP  и подключите его к сайту При подключении к WP указывайте опцию подключения после загрузки библиотеки jQuery

Если у Вас сайт не на DLE или WP то перед строкой подключения этого скрипта вставьте строку

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

Настройки

Вы можете настроить окно под ваши нужды используя опции:

data-title=»Супер заголовок» — заголовок окна

data-height=»150″ — высота окна

data-width=»150″ — ширина окна

Понравилась статья? Ставь лайк.

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

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$