Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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

Ссылки

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

Ccылка
BB-Code
HTML-код

Модальное окно на HTML5 и CSS3 для uCoz

Дата и время публикации : 29.Мар.17 в 20:11 | Раздел : Прочее для uCoz


Параметр Значение
Дата публик. 29.Мар.17, Среда, 20:11
Адапт. дизайн
Обновления Не производились
Просмотрен 259

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

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

HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью. 



Установка :
 

1. В таблицу стилей вставляем код:

/* Стили модального окна */

.modal-header h2 {

       color: #555;       

       font-size: 20px;

       font-weight: normal;

       line-height: 1;       

       margin: 0;

}

/* кнопка закрытия окна */

.modal .btn-close {

       color: #aaa;

       cursor: pointer;

       font-size: 30px;

       text-decoration: none;

       position: absolute;

       right: 5px;

       top: 0;

}

.modal .btn-close:hover {

       color: red;

}

/* слой затемнения */

.modal-wrap:before {

       content: "";

       display: none;

       background: rgba(0, 0, 0, .3);

       position: fixed;

       top: 0;

       left: 0;

       right: 0;

       bottom: 0;

       z-index: 101;

}

.modal-overlay {

       bottom: 0;

       display: none;

       left: 0;

       position: fixed;

       right: 0;

       top: 0;

       z-index: 102;

}

/* активация слоя затемнения и модального блока */

.modal-open:checked ~ .modal-wrap:before,

.modal-open:checked ~ .modal-wrap .modal-overlay {

       display: block;

}

.modal-open:checked ~ .modal-wrap .modal-dialog {

       -webkit-transform: translate(-50%, 0);

       -ms-transform: translate(-50%, 0);

       -o-transform: translate(-50%, 0);

       transform: translate(-50%, 0);

       top: 20%;

}

/* элементы модального окна */

.modal-dialog {

       background: #fefefe;

       border: none;

       border-radius: 3px;

       position: fixed;

       width: 80%;

       max-width: 500px;

       left: 50%;

       top: -100%;

       -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);

       -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);

       box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);

       -webkit-transform: translate(-50%, -500%);

       -ms-transform: translate(-50%, -500%);

       -o-transform: translate(-50%, -500%);

       transform: translate(-50%, -500%);

       -webkit-transition: -webkit-transform 0.4s ease-out;

       -moz-transition: -moz-transform 0.4s ease-out;

       -o-transition: -o-transform 0.4s ease-out;

       transition: transform 0.4s ease-out;

       z-index: 103;

}

.modal-body {

       padding: 20px;

}

.modal-body p {

       margin: 0;

}

.modal-header,

.modal-footer {

       padding: 20px 20px;

}

.modal-header {

       border-bottom: #eaeaea solid 1px;

}

.modal-header h2 {

       font-size: 20px;

       margin: 0;

}

.modal-footer {

       border-top: #eaeaea solid 1px;

       text-align: right;

}

/* адаптивные картинки в модальном блоке */

.modal-body img {       

       max-width: 100%;

       height: auto;

}

/* кнопки */

.btn {

       background: #fff;

       border: #555 solid 1px;

       border-radius: 3px;

       cursor: pointer;

       display: inline-block;

       font-size: 14px;

       padding: 8px 15px;

       text-decoration: none;

       text-align: center;

       min-width: 60px;

       position: relative;

}

.btn:hover, .btn:focus {

       background: #f2f2f2;

}

.btn-primary {

       background: #428bca;

       border-color: #357ebd;

       color: #fff;

}

.btn-primary:hover{

       background: #66A1D3;

}

 

2. HTML код окна вставляем в нижнюю часть сайта перед </body>: 

<div class="modal"> 
 <input class="modal-open" id="modal-1" type="checkbox" hidden> 
 <div class="modal-wrap" aria-hidden="true" role="dialog"> 
 <label class="modal-overlay" for="modal-1"></label> 
 <div class="modal-dialog"> 
 <div class="modal-header"> 
 <h2>Информация о компании uCoz</h2> 
 <label class="btn-close" for="modal-1" aria-hidden="true">×</label> 
 </div> 
 <div class="modal-body"> 
 <p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др.<br><br>К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов. uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet. 
 <br><br> 
 Владелец сервиса — ООО «Юкоз Медиа», Россия.</p> 
 </div> 
 <div class="modal-footer"> 
 <label class="btn btn-primary" for="modal-1">Круто! Люблю uCoz :-)</label> 
 </div> 
 </div> 
 </div> 
 </div>

 

3. Ну и на конец кнопку вызова окна: 

<label title="Стандартное модальное окно" class="btn" for="modal-1">Посмотреть пример модального окна</label>

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Шаблон DevBlog для uCoz

Очень простой шаблон для uCoz под названием DevBlog. Имеет адаптивный дизайн, что позволит читать посты пользователям с любого устро...