Модальне вікно з допомогою CSS і jQuery

49

Розповідаючи про різних техніках сайтобудування, було б безглуздо не розповісти, про деякі способи створення модальних вікон. Про призначення, корисності і виникають проблеми використання спливаючих, модальних вікон ми міркувати не будемо. Розглянемо лише один із численних прикладів створення таких віконець.
Бувають ситуації коли немає можливості використовувати спеціальні плагіни, наприклад такі як fancybox і prettyPhoto, тому варто зрозуміти, як можна створити своє власне модальне вікно.

Модальное окно на jQuery

Демо

Давайте подивимося, як це зробити:

HTML

Почнемо з добавлениятегов з наступними атрибутами:

  • href -#?w=500 вказує ширину вікна
  • rel – унікальний атрибут для кожного вікна
  • class=”poplight” – клас для показу спливаючого вікна
<a href="#?w=500" rel="popup_name" class="poplight">См. Вікно в дії - Ширина = 500px</a>

См. Вікно в дії – Ширина = 500px

Потім нам необхідно створити вбудовану розмітку для спливаючого вікна. Розмістити у будь-якому місці сторінки, ну наприклад в нижній частині змісту. Зверніть увагу, що ідентифікатор спливаючого вікна відповідає атрибуту rel тега
Це і буде пов’язувати посилання і спливаюче вікно разом.

І так, з розміщенням нашого вікна на сторінці ми розібралися, тепер давайте оформимо його за допомогою стилів, надамо йому, так би мовити, благопристойний вигляд.

CSS Верстка

Для більшої ясності, я прописав деякі пояснення до параметрів стилю нашого віконця. Так як спливаючі вікна можуть мати різний розмір, ми не вказуємо в CSS popup_block краю вікна, обчислити необхідний розмір, це завдання для jQuery.

#fade {
display: none;/*--приховано за замовчуванням--*/
background: rgba(7, 87, 207, 0.8);
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none; /*--приховано за замовчуванням--*/
background: #fff;
padding: 20px;
border: 8px solid rgb(134, 134, 134);
float: left;
font-size: 85%;
position: fixed;
top: 50%; left: 50%;color: #000;
max-width: 750px;
min-width: 320px;
height: auto;
z-index: 99999;
/*--CSS3 тінь блоку--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 скруглення кутів--*/
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.popup_block p {
font-weight: 400;
padding: 0;
margin: 0;
color: #000;
line-height: 1.6;}
.popup_block h2 {
margin: 0px 0 10px;
color: rgb(43, 43, 43);
font-weight: 400;
text-align: center;
text-shadow: 1px 1px 2px #0D0C0C;
}
/* формуємо кнопку закриття */
.close {
background-color: rgba(61, 61, 61, 0.8);
border: 2px solid #ccc;
висота: 25px;
line-height: 20px;
position: absolute;
right: -17px;
font-weight: bold;
text-align: center;
text-decoration: none;padding: 0;
top: -17px;
width: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 12px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
}
.shadow {
box-shadow:4px 4px 10px #857373;
-webkit-box-shadow:4px 4px 10px #857373;
-moz-box-shadow:4px 4px 10px #857373;
padding:0;
}
/*--фіксоване позиціонування для IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

#fade {
display: none;/*–приховано за замовчуванням–*/
background: rgba(7, 87, 207, 0.8);
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none; /*–приховано за замовчуванням–*/
background: #fff;
padding: 20px;
border: 8px solid rgb(134, 134, 134);
float: left;
font-size: 85%;
position: fixed;
top: 50%; left: 50%;color: #000;
max-width: 750px;
min-width: 320px;
height: auto;
z-index: 99999;
/*–CSS3 тінь блоку–*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*–CSS3 скруглення кутів–*/
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.popup_block p {
font-weight: 400;
padding: 0;
margin: 0;
color: #000;
line-height: 1.6;}
.popup_block h2 {
margin: 0px 0 10px;
color: rgb(43, 43, 43);
font-weight: 400;
text-align: center;
text-shadow: 1px 1px 2px #0D0C0C;
}
/* формуємо кнопку закриття */
.close {
background-color: rgba(61, 61, 61, 0.8);
border: 2px solid #ccc;
висота: 25px;
line-height: 20px;
position: absolute;
right: -17px;
font-weight: bold;
text-align: center;
text-decoration: none;padding: 0;
top: -17px;
width: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: “X”;
font-size: 12px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
}
.shadow {
box-shadow:4px 4px 10px #857373;
-webkit-box-shadow:4px 4px 10px #857373;
-moz-box-shadow:4px 4px 10px #857373;
padding:0;
}
/*–фіксоване позиціонування для IE6–*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

З формуванням вікна і його зовнішнього вигляду за допомогою css, думаю особливих складнощів не виникне. Стилі можете прописати безпосередньо на сторінці HTML, теги і , а можете винести в окремий файл ваших стилів, зазвичай, це файл style.css, або щось в цьому роді.

Налаштування JQuery

Для повноцінної роботи модального вікна, необхідно підключити jQuery, хто не знайомий з роботою цієї бібліотеки можете прочитати JQUERY — ВСТУПНА.

Ну, а ми підемо далі. Ви можете завантажити останню версію JQuery з сайту бібліотеки, або ж використовувати розміщений у надрах Google окремий файл, підключивши його до документа, в розділі перед закриваючим тегом , розмістивши такий рядок:

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

Після останнього оновлення 15.01.2017, тестував роботу скрипта аж до версії jQuery 3.1.1, політ нормальний ))).

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

<script type="text/javascript" src="dm-modal.js">

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

Плагін JQuery

$(document).ready(function(){
//При натисненні на посилання з класом poplight та href атрибуту тега з #
$('a.poplight[href*=\\#]').click(function() {
var popID = $(this).attr('rel'); //отримуємо ім'я вікна, важливо не забувати при додаванні нових змінювати ім'я атрибута rel посилання
var popURL = $(this).attr('href'); //отримуємо розмір атрибута href посилання
//запит і змінні href url
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //перший значення рядка запиту
//Додаємо до вікна кнопку закриття
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend(");
//Визначаємо маржу(запас) для вирівнювання по центру (по вертикалі і горизонталі) - ми додаємо до 80 висоті / ширині з урахуванням відступів + ширина рамки визначені в css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Встановлюємо величину відступу
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Додаємо напівпрозорий фон затемнення
$('body').append('
'
); //div контейнер буде прописаний перед тегом . $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //напівпрозорість шару, фільтр для тупого IE return false; }); //Закриваємо вікно і фон затемнення $(document).on('click', 'a.close #fade', function() { //закриття по кліку поза вікна, тобто по фону... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); //плавно зникають }); return false; }); });

$(document).ready(function(){
//При натисненні на посилання з класом poplight та href атрибуту тега з #
$(‘a.poplight[href*=\\#]’).click(function() {
var popID = $(this).attr(‘rel’); //отримуємо ім’я вікна, важливо не забувати при додаванні нових змінювати ім’я атрибута rel посилання
var popURL = $(this).attr(‘href’); //отримуємо розмір атрибута href посилання
//запит і змінні href url
var query= popURL.split(‘?’);
var dim= query[1].split(‘&’);
var popWidth = dim[0].split(‘=’)[1]; //перше значення рядка запиту
//Додаємо до вікна кнопку закриття
$(‘#’ + popID).fadeIn().css({ ‘width’: Number( popWidth ) }).prepend(“);
//Визначаємо маржу(запас) для вирівнювання по центру (по вертикалі і горизонталі) – ми додаємо до 80 висоті / ширині з урахуванням відступів + ширина рамки визначені в css
var popMargTop = ($(‘#’ + popID).height() + 80) / 2;
var popMargLeft = ($(‘#’ + popID).width() + 80) / 2;
//Встановлюємо величину відступу
$(‘#’ + popID).css({
‘margin-top’ : -popMargTop,
‘margin-left’ : -popMargLeft
});
//Додаємо напівпрозорий фон затемнення
$(‘body’).append(‘

‘); //div контейнер буде прописаний перед тегом .
$(‘#fade’).css({‘filter’ : ‘alpha(opacity=80)’}).fadeIn(); //напівпрозорість шару, фільтр для тупого IE
return false;
});
//Закриваємо вікно і фон затемнення
$(document).on(‘click’, ‘a.close #fade’, function() { //закриття по кліку поза вікна, тобто по фону…
$(‘#fade , .popup_block’).fadeOut(function() {
$(‘#fade, a.close’).remove(); //плавно зникають
});
return false;
});
});

Висновок:

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

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

При виникненні проблем з зупинкою відео при закритті модального вікна, можете скористатися рішенням описаним тут.

Оновлення: Версія dm-modal.js v1.3 (15.01.2017)
Виправлено: Замінена застаріла функція .live(), використовується синтаксис href*=\\#. Тепер плагін працює з актуальними версіями бібліотеки jQuery

ДемоСкачать

На цьому все! Сподіваюся, вийшов ще один корисний урок.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: