» »

Появляющийся модальное окно на CSS


Появляющийся модальное окно на CSS

Простое светлое появляющийся модальное окно на CSS для сайта. Создано на чистых стилях и в нем нет JavaScript или jQuery, что функциональности не помешало. Это сказать большое измененное окно от других, до этого по такому дизайн заливал на сайт модальный скрипт как материал, что можете выбрать, какое вам лучше подойдет, но как сказал, стилистика одинакова, только здесь установка намного легче. Также здесь прописывать, то что хотите в дивах нужно, что намного легче и это большой плюс. Вы просто в добавление материала подключаете Панель HTML кодов и пишем что нужно, также устанавливаем изображение. И потом просто переносим его и все, также и с скриптами делают.

Установка:

CSS пропишем, там в самих стилях все подробно описано, что отвечает, поставлено ширина width:586px, а вот сама длина стоит на автоматическом режиме.

Код
/* Слой перекрытия */
  .modal
{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.5);
z-index:9;
/* Трансформации прозрачности при открытии */
transition:opacity 511ms ease-in;
/*Скрываем изначально*/
opacity:0;pointer-events:none
}
   
/* Показываем модальное окно */
.modal:target
{
opacity:1;pointer-events:auto
}
/* Содержание */
.modal>div{
width:586px;background:#fff;position:relative;margin:9% auto;
/*По умолчанию минимизируем анимацию*/
-webkit-animation:minimise 511ms linear;
/*Придаем хороший вид*/
padding:31px;
border-radius:7px;box-shadow:0 3px 9px #000;
text-shadow:0 1px 0 #fff;
}
/*Изменяем анимацию при открытии модального окна*/
.modal:target>div{
-webkit-animation-name:bounce
}
.modal h2{
font-size:35px;padding:0 0 9px;
}
@-webkit-keyframes bounce{0%{-webkit-transform:scale3d(.1,.1,1);
-webkit-box-shadow:0 3px 9px #000}55%{-webkit-transform:scale3d(1,1,1);
-webkit-box-shadow:0 9px 9px #000}75%{-webkit-transform:scale3d(1,1,1);
-webkit-box-shadow:0 0 9px #000}100%{-webkit-transform:scale3d(1,1,1);
-webkit-box-shadow:0 3px 9px #000}}
@-webkit-keyframes minimise{0%{-webkit-transform:scale3d(1,1,1)}100%{-webkit-transform:scale3d(.1,.1,1)}}
/*Ссылка на кнопку Закрыть*/
.modal a[href="#close"]{position:absolute;right:0;top:0;color:transparent}
/*Сбрасываем изменения*/
.modal a[href="#close"]:focus{outline:none}
/*Создаем кнопку Закрыть*/
.modal a[href="#close"]:after{content:'X';display:block;
/*Позиционируем*/
position:absolute;right:-9px;top:-9px;width:19px;padding:1px;
/*Стили*/
text-decoration:none;
text-shadow:none;
text-align:center;
font-weight:bold;
background:#000;
color:#fff;
border:3px solid #fff;
border-radius:19px;
box-shadow:0 1px 3px #000
}
.modal a[href="#close"]:focus:after,.modal a[href="#close"]:hover:after{-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
}
.modal a[href="#close"]:focus:after{outline:0 solid #000}
/*Открываем модальное окно*/a.openModal{}
a.openModal:hover,a.openModal:focus{}
.modal .modal_title{display:block;text-align:center;font-size:19pt}


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

Код
<a href="#modal" class="openModal">Открыть модальное окно</a>
<div id="modal" class="modal">
<div>
<div class="text"> НАЧАЛО Статья для начинающих веб мастеров или кто хочет создать свой блог или ресурс. Хочется вам кратко изложить с чего начинать. Но первое это нужно выбрать сам хостинг, где будет и располагаться ваш сайт, он может быть платным и бесплатным.<div><br>   
<div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/CSS-ZORNET/ND/vecst/mac-image1.gif"></div><div align="center"><br></div>
Рекомендую создавать на системе uCoz, так как сама система очень гибкая и главное понятное. Вы всегда можете найти Скрипты для ucoz которые будут вам очень полезны для дизайна сайта, но больше безусловно для его функциональности. Вы можете поставить бесплатный шаблон и потом применить коды по его изменению и у вас будет совершенно оригинальный интернет ресурс.</div> ЗДЕСЬ ЗАКОНЧИЛАСЬ </div>
<a href="#close" title="Закрыть">Закрыть</a>
</div>
</div>


Если будут вопросы, то пишем, если что знаю, постараюсь объяснить, так как только просто проверяю на тестовом сайте, чтоб узнать работает.
25.04.2016 Просмотров: 536 Комментарий: (2)

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

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

Комментарий: 2
FeStemBer
FeStemBer 25.04.2016 01:511
0
Ссылка на почти такое же модальное окно, но здесь только стили, там почему то на css3, но видать есть какая то разница.
Сафрон
Сафрон 25.04.2016 02:422
0
Tventum, да можно сказать одинаковы, просто там стили нужно закидывать в корень сайта, а потом вверх или в низ сайта прописывать, чтоб их вывести на полный сайт.
avatar