Как создать простое модальное окно для сайта с помощью CSS3 | RUDEBOXМодальные окна становятся все популярнее, хоть были реализованы достаточно давно. В данном уроке мы рассмотрим достаточно простые но в то же время анимированные модальные окна. В примере будут реализованы два примера, первый пример будет с эффектом уменьшения модального окна, а второе, соответственно, с увеличением. Кроме этого фон при активации будет полупрозрачным. Такой вариант модальных окон станет отличным дополнением к любому сайту, при умелой интеграции окна можно наполнить мультимедийным контентом.

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Для масштабирования, будут использовать преобразования значение шкалы от 1,2  к 1 . Уменьшение будет иметь от 0,7 до 1 . И так, приступим.

Шаг 1. HTML

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

Как создать простое модальное окно для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Модальные окна будут иметь простой фон, также добавим тени, кроме этого мы будем использовать стили для кнопки, которые мы заготовили ранее.

Нам необходимо добавить трансформации, с помощью которых окна будут увеличиваться и уменьшаться при вызове.

Также был добавлен небольшой фрагмент jQuery, для улучшения работоспособности и вспомогательных функций.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.