Css модне вікно в модальне вікно. Модне вікно на css, як зробити модне вікно. Розберемося із шириною

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

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

HTML5 та CSS3 дозволяють створювати модальні вікна з надзвичайною легкістю.

Розмітка HTML

Перший крок на шляху до створення модального вікна - проста та ефективна розмітка:

Відкрити модальне вікно

Всередині елемента div розміщується зміст модального вікна. Також необхідно організувати посилання для закриття вікна. Наприклад розмістимо простий заголовок і кілька параграфів. Повна розмітка для нашого прикладу буде виглядати так:

Відкрити модальне вікно X Модальне вікно

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

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

Стилі

Створюємо клас modalDialogі починаємо формувати зовнішній вигляд:

ModalDialog ( position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index : 99999;-webkit-transition: opacity 400ms ease-in;

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

Фон матиме невелику прозорість, а також розташовуватиметься поверх усіх інших елементів за рахунок використання властивості z-index.

На завершення встановлюємо переходи для виведення нашого модального вікна та приховуємо його у неактивному стані.

Можливо ви не знаєте властивість pointer-eventsале воно дозволяє контролювати як елементи будуть реагувати на натискання кнопки миші. Ми встановлюємо значення його значення для класу modalDialog, так як посилання не має реагувати на натискання кнопки миші, коли активний псевдо клас ":target".

Тепер додаємо псевдо клас :targetта стилі для модального вікна.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10 fff; background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999); )

Псевдо клас targetзмінює режим виведення елемента, тому наше модальне вікно виводитиметься при натисканні на посилання. Також ми змінюємо значення якості pointer-events.

Ми визначаємо ширину модального вікна та положення на сторінці. Також визначаємо градієнт для фону та закруглені кути.

Закриваємо вікно

Тепер потрібно реалізувати функціонал закриття вікна. Формуємо зовнішній вигляд кнопки:

Close ( background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font- weight: bold, -webkit-border-radius: 12px, -moz-border-radius: 12px, border-radius: 12px, -moz-box-shadow: 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover ( background: #00d9ff; )

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

Модальне вікно – маленьке віконце, яке спливає, щоб сказати про щось важливе. Чи важко зробити модальне вікно без Bootstrap? Спробуємо розібратися.

Куди вставити в DOM?

Зазвичай, я ставлю його перед закриваючим body body.

В основному через стилі. Набагато легше позиціонувати модальне вікно на CSS, коли ви маєте справу з шаром, що обгортає весь body, ніж з невідомим набором батьківських елементів, у якого потенційно може бути своє позиціонування.

Центрування

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

Modal ( position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); )

Це дуже зручно, оскільки відкрите модальне вікно зазвичай повинно бути прямо по центру, незважаючи на ширину. Висота, швидше за все зміниться, оскільки вона залежить від контенту всередині.

Position – fixed?

Зверніть увагу ми використали position: fixed; щоб користувачі могли мати можливість скролити вниз, в той час, як відкрите модальне вікно залишалося завжди посередині. Я вважаю в цілому, що значення fixed вже можна сміливо використовувати, навіть на мобільних пристроях. Однак, якщо потрібно врахувати старі телефони, спробуйте замінити значенням absolute.

Розберемося із шириною

На великих екранах типове відкрите модальне вікно не тільки відцентроване, але й обмежене по ширині.

Modal ( width: 600px; )

Однак, є такі екрани, які менше 600px завширшки. Щоб виправити ситуацію, додамо максимальну ширину.

Modal ( width: 600px; max-width: 100%; )

Висота

Задавати висотку ще відповідальніше заняття. Ми знаємо, що контент має властивість змінюватись. Плюс, техніка центрування через transform радісно обрізає краї, без появи скролл-бару. Встановлення максимальної висоти убезпечить нас вдруге.

Modal ( height: 400px; max-height: 100%; )

Overflow

Після того як ми розібралися з висотою, настав час зайнятися властивістю overflow. Поширено використовувати overflow значення, прямо в.modal, однак, є дві проблеми з цим:

• Ми можемо захотіти використовувати елементи, які не повинні скролюватися
• Overflow обріже тінь, яку ми будемо використовувати.

Я запропонував би використовувати внутрішній контейнер:

Враховуючи, що у нас буде контент, який потрібно скролити, нам потрібно задати висоту. Є кілька варіантів. Ось один із них:

Modal-guts ( position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* відступи */ padding: 20px 50px 20px 20px; /* дозволимо скролити */ overflow: auto; )

Кнопки

Ідея використання модальних вікон у тому, щоб змусити виконати будь-яку дію, перед тим, як щось буде зроблено. Зробити кнопку закриття вікна видно в будь-якому стані здається гарною ідеєю.

Закрити

Розберемося із затемненням

Звичайне модальне вікно роблять з фоном, що повністю затемнюється. Це корисно з кількох причин:

• воно може затемнити інший екран
• може запобігти клікам/взаємодії з контентом навколо модального вікна
• може використовуватися як гігантська кнопка закриття

Типовий приклад використання:

.modal ( /* все що ми вже вище описали */ z-index: 1010; ) .modal-overlay ( z-index: 1000; position: fixed; top:0; left:0; width: 100%; height: 100%;

Закривати класом, а не відкривати класом

Я помітив поширене явище, коли за умовчанням .modal клас прихований, наприклад display: none; Потім, щоб відкрити додають клас .modal.open (display: block;)

Однак це може бути і погано, тому що ваше модальне вікно може бути display: flex; та display: block; його перепише.

Modal ( .display: flex; ) .modal.closed ( display: none; )

Додамо JavaScript var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector(" # open-button "); closeButton.addEventListner("click", function()( modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); )); openButton.addEventListner("click", function()( modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); ));

Модальне або спливаюче вікно (називають по-різному) – це дуже поширений застосовуваний на веб-сайті. Основне його призначення - це висновок різної інформації(в основному текстової та при наявності декількох картинок), яка з'являється при натисканні на будь-який спеціальний об'єкт (посилання, кнопка або фото).

У модальне вікно, як правило, для економії місця на сайті, прописують не особливо важливу інформацію, Наприклад як: зворотний зв'язок, авторизація, або .

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

Хтось робить для цих цілей модальне вікно при відкритті сторінки, яке з'являється на сторінці через певний проміжок часу використовуючи зрозуміло java скрипт, а інший хоче різними способамизалишити відвідувача на своєму сайті та використовує модальне вікно при закритті сторінки, яке спливає в той момент, коли клієнт хоче вже залишити та закрити сторінку.

Перший приклад спливаючого модального вікна.

Для того щоб зробити модальне вікно застосовуючи тільки css, необхідно прописати html коддля об'єкта, що посилає, на спливаюче вікно і в стильовому файлі призначити параметри і властивості для правильного відображення красивого модального вікна.

.my_modal(position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0; padding:0;).my_modal:target(display:block;overflow-y:auto;).my_modal-dialog(position:relative;width:auto;margin:10px;)@media (min-width:576px)(. my_modal-dialog(max-width:460px;margin:30px auto;)).my_modal-content(position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex ;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff; -webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;)@media (min -width:768px)(.my_modal-content(-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5) );)).my_modal-header(display:block;padding:14px 14px 4px;).my_modal-title(margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem; font-weight:500;border-bottom:1px solid #d4d4d4;).close(padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size :24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position :absolute;).close:focus,.close:hover(color:#000;text-decoration:none;cursor:pointer;opacity:.75;).my_modal-body(position:relative;-webkit-box-flex :1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;) Відкрити модальне вікно

Заголовок модального вікна

×

Тут прописано текстова інформаціямодального вікна...

Скопіюйте, вставте та збережіть вищезазначений код у текстовий документпід ім'ям index.html та після відкрийте його у браузері для перевірки працездатності модального вікна. Тут же ви можете підкоригувати зовнішній вигляд модального вікна виходячи з дизайну вашого проекту.

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

Модальне вікно при натисканні на кнопку

У цьому прикладі я покажу, як прописати кнопку для відкриття модального вікна.
Для цього нам потрібно лише додати в коді для кнопки та для блоку модального вікна атрибут HTML onclick і цим викликати функцію з певним ім'ям.

Приклад кнопки виклику модального вікна (натисніть).

Модальне вікно кнопка

#overlay ( position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; overflow: auto; visibility:hidden;opacity:0;transition:opacity 0.7s ease-in 0s; ) .popup (top: 10%; left: 0; right: 0; font-size:14px; min-width: 200px, max-width: 600px; position: absolute; padding: 15px 20px; border: 1px solid #666; background-color: #fefefe; /18px "Tahoma", Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); ) .close ( top: 10px; position: absolute; border: none; border-radius: 50%; background-color: rgba(0, 130, 230, 0.9); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; outline: none; ) . : Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover ( background-color: rgba(180, 20, 14, 0.8); ) #overlay .popup p.zag(margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size: 16px;font-weight:bold;border-bottom:1px solid tomato;)

Потім скопіюйте та вставте html код модального вікна:

Модальне вікно

Перша текстова інформація...

Друга текстова інформація...

Наступна текстова інформація...

Модальне вікно

І останнє, пропишіть перед скрипт для виклику та закриття модального вікна:

var b = document.getElementById("overlay"); function swa()( b.style.visibility = "visible"; b.style.opacity = "1"; b.style.transition = "all 0.7s ease-out 0s"; ) function swa2()( b.style .visibility = "hidden"; b.style.opacity = "0";

Діліться з друзями та запитуйте, якщо щось не виходить при створенні модального вікна.

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

Зовнішній вигляд, розміри та оформлення таких попапів абсолютно різноманітними – з оверлеєм, тінюшками, анімаціями – всього не порахувати. Поєднує їх тільки, мабуть, той факт, що зазвичай вони виводяться в самому центрі сторінки - як по горизонталі, так і по вертикалі. І центрування це здійснюється засобами JS. Я не вдаватимуся до подробиць цих розрахунків, опишу їх лише коротко:

HTML-код попапа зазвичай має таку структуру:

... -- Попап разом із вмістом -->

І CSS ( тут і нижче я навмисне опускатиму написання деяких властивостей, необхідних лише для деяких браузерів та їх версій, залишивши лише найголовніше):

Popup__overlay (
position: fixed;
left: 0;
top: 0;
background: #000;
opacity: .5;
filter: alpha (opacity = 50);
z-index : 999
}
.popup (
position: absolute;
width: 20%;
z-index: 1000;
border: 1px solid #ccc;
background : #fff
}

JS визначає браузер і версію браузера, і на підставі цього вираховує розміри робочої області та розміри самого попапа (якщо вони не задані), а потім проводяться нехитрі обчислення положення його верхнього лівого кута (css-властивості left і top для.popup). Багато плагінів також реагують на зміну розмірів сторінки, перераховуючи всю цю справу щоразу, щоб попап розташовувався точно в центрі робочої області.

Я за своєю натурою перфекціоніст (знаю, часом це погано), і частенько заморочуюсь навіть над дрібними деталями, намагаючись поліпшити і додати максимально можливу розширюваність цим деталям, і мене не міг не зачепити саме цей момент у роботі всіх цих плагінів. Виникла думка, що всю роботу з позиціонування попапа можна перекласти з плечей JS на плечі самого браузера, тобто виконувати цю роботу засобами CSS.

Цим і займемося.

Нижче наведу приклад попапа, що працює у всіх мажорних версіях основних браузерів. Для коректної роботи в IE
< div class ="popup">

І трохи CSS:

Popup__overlay (
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index : 999
}
.popup (
}

Фіксовані розміри Найпростіший варіант. Нічого нового винаходити не потрібно:

Popup (
left: 50%;
top: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
margin-top : -100px
}

Негативні margin"и в половину ширини і висоти - банально і нудно, нічого оригінального в цьому немає. Ідемо далі.

Розміри попапа залежать від вмісту Спершу – вирівнювання по горизонталі – це начебто простіше. Якщо попап фіксованої ширини - достатньо буде наступного:

Popup (
margin: auto
}

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

Вертикальне вирівнювання. Тут уже цікаво. З таким завданням, звичайно, без проблем впоралася б таблиця або емуляція таблиці за допомогою display:table & display:table-cell, але змусити таке працювати в старих IE - собі дорожче. Таблиця також відпадає – зі зрозумілих причин.

Отже, margin вже відпадає – розмірів ми не знаємо. Згадуємо, що є з властивостей з подібними ефектами. Ага, text-align. Але лише для інлайнових елементів. ОК. Здається, сам Бог велів використовувати display: inline-block – блоковий елемент, до якого можна було б застосувати властивості для інлайнових елементів. За допомогою цієї якості у всіх браузерів теж все, можна сказати, в порядку. Код стає приблизно таким:

Popup__overlay (
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
text-align : центр
}
.popup (
display: inline-block;
vertical-align : middle
}

Залишається вертикальне вирівнювання – нам підійде vertical-align. У будь-якій іншій ситуації було б доречно використовувати line-height, але оскільки у нас немає фіксованої висоти сторінки (line-height в даному контексті), тут використовувати її не можна. На допомогу приходить один трюк із вертикальним вирівнюванням елементів невідомих розмірів. Я точно пам'ятаю, що знайшов цей спосіб на Хабре, але, на жаль, не зміг знайти посилання на той топік. Полягає цей спосіб у наступному: додається inline-block елемент нульової ширини і 100% висоти батька, який «розхлопує» висоту рядка до 100% висоти батька, тобто до висоти робочої області сторінки. Зробимо це витонченіше – замість зайвої розмітки скористаємося псевдоелементами:

Popup__overlay :after (
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content : ""
}

Залишилося додати напівпрозоре затемнення оверлея - це впорається rgba. Всі! Тепер положення попапа регулюється лише засобами браузера лише на рівні CSS.

У цьому уроці ми навчимося створювати модальне вікно за допомогою HTML5 та CSS3. В уроці ми не будемо використовувати JS, тільки повністю CSS3. Модальні вікна можна використовувати для форми зворотнього зв'язку, для фото та відео та ще є безліч варіантів його застосування.

Починаємо робити наше модальне вікно.

Крок 1. Розмітка HTML

Насамперед нам потрібно зробити HTML-розмітку, тобто. зробити посилання, по якому буде відкриватися вікно, і зробити каркас нашого вікна. Для цього пишемо такий код:

Крок 2. Вміст модального вікна

Тепер додамо сам вміст нашого вікна. Зробимо заголовок і невеликий текст і помістимо це все в тег і вставимо в код замість крапки. Ще потрібно вставити посилання, за яким закриватиметься наше вікно і надати їй class="close" . Ось так має виглядати ваш код:

ПРОЕКТ REDSTAR

REDSTAR – проект присвячений питанням, які Вас так давно цікавили. На цьому проекті розміщені безкоштовні уроки та статті з різних тем. Теми дуже різноманітні, починаючи від простої установки Windowsта закінчуючи розробкою сайтів.

Крок 3. Стилі

Тепер починаємо писати стилі для нашого вікна. У цьому кроці ми зробимо невидимим вікно. Воно з'являтиметься лише після натискання на посилання. Для цього пишемо стилі для нашого класу modalDialog:

ModalDialog ( position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index : 99999; opacity: 0;

Крок 4. Функціонал та перегляд

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

ModalDialog:target ( opacity:1; pointer-events: auto; display: block; ) .modalDialog > div ( width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-rad background: #fff; background: -moz-linear-gradient(#fff, #b8ecfb); background: -webkit-linear-gradient(#fff, #b8ecfb); #b8ecfb);

На цьому кроці ви можете переглянути ваше вікно, воно вже функціонує. Але кнопка close виглядає не дуже красиво.

Тепер нам потрібно дописати стилі для нашого класу close.

Крок 5. Робимо кнопку close

У цьому кроці ми покращимо зовнішній вигляд нашої кнопки, яка закриватиме наше вікно. Для цього пишемо стилі для нашого класу close:

Close ( background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font- weight: bold, -webkit-border-radius: 12px, -moz-border-radius: 12px, border-radius: 12px, -moz-box-shadow: 3px #000; box-shadow: 1px 1px 3px #000; .

Ну, тепер наша кнопка виглядає так, як і замислювалося. У вас вона має виглядати також:

На цьому цей урок закінчено. Дякую за увагу! Для вашої зручності я додав демо-версію та вихідні файли. Якщо щось не зрозуміло, то скачайте вихідні файли.