» »

Простое модальное окна на css3 для сайта


Простое модальное окна на css3 для сайта

Сейчас пошла тенденция устанавливать на свой сайт модальное окна, и это прекрасно, так как в нем можно установить все что вам нужно и главное это не сложно. Здесь можно сказать в множественном числе модальные окна, так как на сайте можно установить сколько вам нужно. Все очень просто, и по своему дизайн красивое. Так как знаем, что если ставить второе, нам нужно опять прописывать, но не в этом случай. Заполняется оно просто, можете зайти загрузить материал и выставить Панель HTML кодов и писать или скрипт ставить. Вот к примеру это, что написал, сделал так.

Модальное окно для uCoz

Приступаем к установке:

Для начало скачиваем файл стилей, он там один и его нужно разместить в папке css, если нет такой то создаем.

Потом на всех страницах, где хотите видеть окно, но сделал по другому и поставил в низ сайта.

Код
<link rel="stylesheet" type="text/css" href="/css/modal.css" />


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

Код
<aside id="modal" class="modal">  
<div style="width:300px; height:auto;">

Здесь ваше описание или скрипт
   
<a href="#close" title="Закрыть"></a>  
</div>
</aside>


Мы видим что ширина выставлена на 300px, здесь сами делайте как вам угодно, а высота автоматически будет.

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

Код
<a href="#modal"><span>Сим сим откройся</span></a>


Вот все готово!

Но как говорил, что вы можете делать несколько, все очень просто, в коде ID и aside просто чтоб были разные, можете цифры добавлять или как угодно. И не нужно забывать в этом случай, чтоб бы ID тега aside и в ссылке вашего вызова окна совпадали, но это понятно, если не будет совпадение, то не что не появиться.

Это самое малое по коду окно, и очень удобно в установление, что пока ставил.
19.03.2016 Загрузок: 5 Просмотров: 577 Комментарий: (4)

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

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

Комментарий: 4
Сафрон
Сафрон 19.03.2016 02:031
0
Нормальное модальное окно, Костен найди темное, чтоб было наоборот, светлые тени. Здесь большой плюс, что вот для меня оно понятное, но понимаю как написать или установить изображение, а вот скрипты, там нужно думать, так бы форму входа можно было поставить, где первая идет для локального пользователя и в низу под социальные.
Kosten
Kosten 19.03.2016 02:103
0
Сафрон, да ты сам найди и потом скинешь мне, такое почти сегодня видел. Но там установка мне не очень понятно, хотя она почти одинакова у всех. Просто как видишь проверяю, чтоб точно работало и потом ставлю, мне бы такое темное окно тоже бы как материал не помешало, но тупа скопировать и не зная работает или нет, посмотрим.
Сопрано
Сопрано 19.03.2016 02:144
0
Но форму входа простую можно поставить же без труда, тут главное чтоб скрипт работал, а что по форме, поставил оператор и готово.
tsakonter
tsakonter 19.03.2016 02:082
0
Вообще раньше не понимал для чего оно, и пытался поставить, не чего не получилось. Но это с первого раза установил, теперь точно нужно научиться устанавливать скрипты, хотя оставлю его, но под новости отлично, шире сделал, так вообще по другому заиграло.
avatar