Простое модальное окна на css3 для сайта - Модальные окна - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Модальные окна


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

Приступаем к установке:
 
Для начало скачиваем файл стилей, он там один и его нужно разместить в папке 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 и в ссылке вашего вызова окна совпадали, но это понятно, если не будет совпадение, то не что не появиться.
Это самое малое по коду окно, и очень удобно в установление, что пока ставил.

Важно!

При копировании материала указывать ссылку на источник.

- 487
- 11-Октября-2016
- 3
- 0
Материал разместил:

Похожий материал
Похожего материала не найдено...
Статьи сайта