Адаптивне модальне вікно строго по центру
Адаптивне модальне вікно строго по центру
Як зробити стовідсотково адаптивне модальне вікно. яке до того ж виводилося строго по центру і однаково добре, без видимої ломки, виглядало на різних типах екранів призначених для користувача пристроїв?
Питання звичайно цікаве, а процес реалізації і зовсім захоплюючий. Звичайно, макет модального вікна, про який сьогодні піде мова, швидше за гумовий, так як адаптивність, в наворочених колах, має на увазі наявність, прописних мета-тегів для мобільних пристроїв, медіа-запитів в css та інші встановлені «трендованнимі буржуїнамі» та іже з ними, стандартами.
До теми створення модальних вікон, я повертався багато разів, описував способи з використанням jQuery і виключно на чистому CSS3. У представленому сьогодні прикладі об'єднав деякі концепції і вийшло те, що вийшло. Не варто приймати цей метод, як керівництво до дії, швидше за це, робочий матеріал, пошуки оптимальних рішень.
Дивіться живий приклад, а далі розберемо трохи по-докладніше складові.
Html розмітка
Напевно, для центрування, замість елементів блокової таблиці table-cell. простіше було б використовувати трансформацію, властивість transform з негативними процентними значеннями, але крім того, що метод не працює в IE8 і необхідне використання префіксів, головне, він може заважати роботі інших ефектів з transform, а в деяких випадках при рендеринге розмиваються краю блоку і текст . Хоча у випадку з IE8, модальні вікна на чистому CSS, так і так не спрацьовують.
Для визначення ширини модального блоку, як ви бачите, я використовував одиницю виміру в em і встановив максимальну ширину елемента max-width. так вікно видозмінюється коректніше ніж при width:%;
Ніяких додаткових js-бібліотека не підключав до роботи, тільки магія CSS3. Модальний блок і шар затемнення, до пори до часу сховав з газ геть (зі сторінки), за допомогою display: block ;. Прикрутив простеньку анімацію через @keyframes. за допомогою властивості opacity. з невеликою затримкою, відбувається плавний перехід модального вікна і шару затемнення у відкритий стан. У кого з'явиться бажання, можете сміливо поекспериментувати, благо прикладів в мережі предостатньо.
Буду всім вдячний, якщо підтримаєте проект - додавши блог в виключення AdBlock і поділіться посиланням на запис в своїх соц-мережах: