Модальне вікно на CSS3 (варіант №2)

50

Доброго дня всім!
Сьогодні буде не повноцінний урок, а всього лише невелика демонстрація, ще одного варіанту спливаючого модального вікна, реалізованого виключно засобами CSS3, без javascript і додаткових зображень у формуванні стилів.
За основу взято перший варіант: «Модальні спливаючі вікна з допомогою CSS3 без Javascript», перевірений і став досить популярним серед користувачів, які читають мій блог.

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

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

Щоб вам легше було розібратися що до чого і навіщо, залишив всі вихідні коди і живий приклад роботи віконця в онлайн-редакторі, так що сміливо можете поекспериментувати з параметрами «не відходячи від каси» ))).

Для тих же, хто віддає перевагу дивитися живий приклад роботи модального віконця на окремій сторінці, спеціально таку сторінку заклав. Исходники дбайливо упакував в архів і виклав для скачування через Яндекс.Диск:

ДемоИсходники

До речі, якщо когось зацікавила кнопочка, для виклику модального вікна, що представлена у прикладі, зовсім недавно, я детально розписував, як зробити таку «Ну дуже велику кнопку 3D».
З підтримкою браузерами даного рішення, все як завжди, сучасні версії відмінно обробляють висновок модального вікна, а IE-шка версії нижче 9-ї версії, пролітає повз, як і в’язні наполегливо використовують це дітище м’якотілих. Так що працюємо на майбутнє ))).
Помітите помилку, або виникнуть питання, пишіть у коментарях [v], все обов’язково обговоримо.

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

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