Простое модальное окна на css3 для сайта
 | |
Сейчас пошла тенденция устанавливать на свой сайт модальное окна, и это прекрасно, так как в нем можно установить все что вам нужно и главное это не сложно. Здесь можно сказать в множественном числе модальные окна, так как на сайте можно установить сколько вам нужно. Все очень просто, и по своему дизайн красивое. Так как знаем, что если ставить второе, нам нужно опять прописывать, но не в этом случай. Заполняется оно просто, можете зайти загрузить материал и выставить Панель 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 и в ссылке вашего вызова окна совпадали, но это понятно, если не будет совпадение, то не что не появиться. Это самое малое по коду окно, и очень удобно в установление, что пока ставил. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
