Досить часто на сайтах можна зустріти модальні вікна, і всі вони використовуються для різних завдань. Насправді, це доволі потужний засіб, який дозволяє зробити інтерфейс сайту більш інтерактивним і зручним. Наприклад, модальні вікна можуть бути використані для різних форм, таких як форма авторизації, форма зворотнього зв’язку, оформлення замовлення товару, так і мало.
В даному пості ми розглянемо приклад, як зробити просте модальне вікно з допомогою JQuery і CSS. Особливість даного прикладу в тому, що тут не потрібно додаткові плагіни, ну за винятком самої бібліотеки JQuery.
Розміщуємо код модального вікна на сторінці:
закрити
Відкрити модальний
Як видно з розмітки, блок самого модального вікна це div c атрибутом id=modal_form, який містить елемент span c id=modal_close. Цей елемент буде служити кнопкою для закриття модального вікна, крім того, нижче блоку розташований блок div з атрибутом id=overlay, який служить одночасно і для затемнення фону. Модальне вікно буде відкриватися за посиланням, з класом modal.
Далі слід оформити розмітку належним чином, для цього задаємо стилі для модального вікна.
CSS для модального вікна
#modal_form {
width: 300px;
height: 300px;
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed;
top: 45%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
display: none;
opacity: 0;
z-index: 5;
padding: 20px 10px;
}
#modal_form #modal_close {
width: 21px;
height: 21px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
display: block;
}
#overlay {
z-index:3;
position:fixed;
background-color:#000;
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(opacity=80);
width:100%;
height:100%;
top:0;
left:0;
cursor:pointer;
display:none;
}
Для modal_form ми поставили фіксовану ширину і висоту, а потім отцентрировали положення по центру екрана. Для підкладки модального вікна (overlay) ми задаємо розмір по ширині екрану, заливку з прозорістю, а так само ховаємо її за замовчуванням. Особливий момент з z-index, у модального вікна він повинен бути найбільшим з усіх елементів на сторінці, а у обкладинки повинен бути більше всіх елементів, крім самого модального вікна.
Тепер до самого основному, це код на javascript. Для модального вікна буде використовуватися два основні події, це його відкриття — клік по елементу з класом modal, в нашому випадку це посилання, і закриття модального вікна, це клік по обкладинці (overlay), або клік на кнопку закрити, в нашому випадку це елемент span id=modal_close.
$(document).ready(function() {
$(‘.modal’).click( function(event){
event.preventDefault();
$(‘#overlay’).fadeIn(400, // анимируем показ обкладинки
function(){ // далі показуємо мод. вікно
$(‘#modal_form’)
.css(‘display’, ‘block’)
.animate({opacity: 1, top: ‘50%’}, 200);
});
});
// закриття модального вікна
$(‘#modal_close, #overlay’).click( function(){
$(‘#modal_form’)
.animate({opacity: 0, top: ‘45%’}, 200, // зменшуємо прозорість
function(){ // після анімації
$(this).css(‘display’, ‘none’); // приховуємо вікно
$(‘#overlay’).fadeOut(400); // приховуємо підкладку
}
);
});
});
За допомогою animate ми міняємо позицію по вертикалі top, а так само прозорість opacity, і з допомогою цього отримуємо цікавий ефект. Подібний ефект використовується як при відкритті вікна, так і при його закритті. Відмінність в тому, що змінюється порядок застосування властивостей для блоків, тим самим візуалізуючи відкриття і закриття вікна.
Приклад роботи модального вікна.
Додав: htmaker, 25.12.2016 р.
(4 голосів, середній: 3,00 з 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
