» »

Универсальное модальное окно для сайта

Универсальное модальное окно для сайта

Это полностью адаптивное и в своем роде универсальное модальное окно, которое автоматически настроено как на видео и изображение. Его плюсы, что оно будет выводиться по центру, не смотря какой размер монитора или экрана пользовательское устройства. Само оно резиновое, если можно так выразиться и потому под мобильные устройства корректно смотрится. Появление его красивое и полностью созданное на чистом CSS3.

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

Само оно отличается своей гаммой цвета, но это можно сделать и под другой, все редактировать в стилях. Есть у него эффект затемнение при появлении, чтоб не отвлекало по сторонам, но это тоже скажем не ново и можно на многих наблюдать, но здесь идет на весь экран. Здесь просто разберем как работает, а это стили поставить в css и саму основу с информацией в низ сайта или вверх, но и сама кнопка, в нашем случай надпись, чтоб вызвать его.

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

Это так будет видео показывать:

Модальное окна на видео плеер

Когда вы будите прописывать информацию или ставить генераторы, а это все возможно, как и форму регистрацию и вывести социальные кнопки, здесь нужно включать HTML коды, чтоб все смотрелось правильно и корректно.

Источник: dbmast.ru
16.04.2017 Загрузок: 5 Просмотров: 478 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Brung
Brung 16.04.2017 19:191
0
Там есть тема, как сделать небольшое изображение, как на вид материала, сне оно не очень, но сама тема есть на этом окне, отличие от других.
Scheme
Scheme 16.04.2017 19:342
0
Красивый цвет, как раз под кино сайт под трейдер, только кнопку поставить.
tsakonter
tsakonter 16.04.2017 19:363
0
Эти модальные окна большинству не нужны, можно от самой системы сделать а не пихать лишнее коды и стили.
Марковичь
Марковичь 16.04.2017 20:114
0
От куда такая информация, может на софте они не нужны, но есть много других тем, где без модального окна не обойтись, и здесь поставить хорошее будет отличным предложением.
Maryges
Maryges 16.04.2017 20:185
0
Очевидно на кино сайт, все просто, поставил код плеера и не чего не нужно выставлять, и автоматически окно выводит, оно и не большое и не малое, в самый раз по контуру.
avatar