Як зробити спливаюче вікно на сайті самому

5/55 ratings

І так дорогі друзі як Ви вже зрозуміли з назви сьогодні хочу додати ще одну замітку про те
як можна зробити самостійно без будь-яких модулів і доповнень спливаюче вікно з затемненням заднього фону сайту і його розмиванням.
А для DLE я покажу вам ще приклад як зробити розмиття для всіх вікон в системі включаючи системні.
Тож почнемо:
1. Підключаємо стилі

.box_window{
  width:700px;
  display: none; 
  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);
}

.box_window{

width:700px;

display: none;

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 Вставляємо код віконця
Відкрийте шаблон головної сторінки сайту і перед тегом вставте

<div id="1" class="popwindow" data-title="Супер заголовок" data-height="150">зміст спливаючого вікна</div>

1	<div id="1" class="popwindow" data-title="Супер заголовок" data-height="150">зміст спливаючого вікна</div>

3 Ставимо кнопку при натисканні на яку буде показуватися наше вікно
У потрібному місці сайту вставте

div class="popbutton" data-window="1">Натисни на мене повністю</div

1	div class="popbutton" data-window="1">Натисни на мене повністю</div

де “1” це ID блоку з вмістом вікна
4 Ефект розмиття і затемнення
Відкрийте шаблон головної сторінки вашого сайту і знайдіть тег і після нього вставте

<div class="toblur">

1	<div class="toblur">

Далі знайдіть код який ми вставили раніше

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

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

і перед ним вставте тег

</div>

</div>

5 Підключаємо чудо скрипт і радіємо
СКАЧАТИ СКРИПТ
Завантажте скрипт за допомогою FTP і підключіть його до сайту При підключенні до WP вказуйте опцію підключення після завантаження бібліотеки jQuery
Якщо у Вас сайт не DLE або WP то перед рядком підключення цього скрипта вставте рядок

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

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

Налаштування
Ви можете налаштувати вікно під ваші потреби використовуючи опції:

data-title=”Супер заголовок” – заголовок вікна
data-height=”150″ – висота вікна
data-width=”150″ – ширина вікна

data-title=”Супер заголовок” – заголовок вікна

data-height=”150″ – висота вікна

data-width=”150″ – ширина вікна

Ось в принципі і все що нам було потрібно зробити, і тепер ми можемо похвалитися своїм спливаючих вікном яке буде виглядати приблизно як на фото нижче, Удачі Вам.