» »

Модальное окно на CSS3 без JS для сайта


Модальное окно на CSS3 без JS для сайта

Очередное светлое по оттенку цвета модальное окно, которое на чистом CSS. Теперь вам дает больше преимущества, чем раньше было привязано с JavaScript. Дизайн у него простой, и в тоже время он подойдет под любой интернет ресурс, который аналогичного оттенка. Здесь идет свершу как шапка, где будет написан заголовок, и также в самом низу, в правом углу надпись отключить. Просто если вы его откроете и даже перезагрузите страницу, автоматически не пропадет.Стили понятны, что вы сами можете даже поставить кнопку, на крестик, чтоб убрать и главное, там все так сделано, что на другую гамму можно без особого труда его перекинуть.

Установка:

Для начало в CSS ставим:

Код
/* Стили для неактивного модального окна */
.modal {
  background: #fff;
  left: 50%;
  margin: -250px 0 0 -40%;
  position: absolute;
  top: -50%;
  width: 70%;
  border-radius: 5px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.58);
  -moz-box-shadow: 0 3px 7px rgba(0,0,0,.25);
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.68);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* Активация модального окна в состоянии :target */
.modal:target {
  top: 50%;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.modal header, .modal footer {
  background: #f7f7f7;
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
}
.modal footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
}
.modal section, .modal header, .modal footer {
  padding: 15px;
  z-index: 200;
}
.modal h2 {
  margin: 0;
}
.modal .btn {
  float: right;
}


Этот код в низ сайта, так как он является самим каркасом, где и будете все делать.

Код
<aside class="modal" id="modal">
  <header>
  <h2>Скрипты и шаблоны сайта ZorNet.Ru</h2>
  </header>
  <section>
   
  Здесь вам нужно поставить оператор к примеру обратная связь или написать правила и поставить на ссылку.

  </section>
  <footer class="footer">
  <a href="#" class="btn">Закрыть</a>
  </footer>
</aside>


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

Код
<a href="#modal">Открыть модальное окно</a>


Теперь о главном:

Обратите внимание, что все стили привязаны не к id модального окна, а к его классу. Благодаря этому, мы можем использовать несколько модальных окон на странице с разными id и общим классом. А с помощью добавления классов-модификаторов можно стилизовать каждое окно.
Здесь само окно будет появятся сверх в низ, не плавно, но и не быстро.

25.04.2016 Просмотров: 704 Комментарий: (15)

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

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

Комментарий: 13
tsakonter
tsakonter 25.04.2016 23:501
0
Как то не привычно, без кнопки, а по одному названию, которое еще и найти надо. А так что оно такое широкое, что меньше сделать не как нельзя?
FeStemBer
FeStemBer 25.04.2016 23:532
0
Но а для чего делать модальное окно, чтоб его по ширине потом нельзя регулировать. Можно еще понять, что по высоте будет стоять AVTO, но ширина обязательное, просто смотрите внимательно CSS, там все понятно написано.
Сафрон
Сафрон 26.04.2016 00:063
0
Но, где демонстрация, на такой материал ее обязательно нужно делать, но чтоб смотреть, это же не сложно, Костен, сам же писал, или опять забыл.
Kosten
Kosten 26.04.2016 00:094
0
Забыл, но уже сделал, сейчас поставлю, тоже главное залыл написать, что окно появляется с верх.
Kosten
Kosten 26.04.2016 00:166
0
Сделал демонстрацию, можно смотреть, и полностью согласен, что нужно делать, но так то все скрины беру с тестового сайта, где с начало ставлю и разбираюсь поверхностно по материалу.
csretven
csretven 26.04.2016 00:145
0
Нормально смотрится, мне вот наоборот кнопка здесь не нужно, чисто светлое, но и хорошо заметно, чтоб отключить. А как появляется, это уже дело вторичное, главное работает. Вот бы еще теней добавить, то в низу они есть, а по остольным сторонам как то не заметно, и на светлом фоне может сливатся.
Kosten
Kosten 26.04.2016 00:177
0
Но кому как, можно было кнопку поставить и стили есть, как сказал Траст, но что то даже и не подумал.
FeStemBer
FeStemBer 26.04.2016 00:198
0
Вы про эти говорите, то нормально смотрелось, но это еще в самом коде нужно вывести.

Код
/*=== Stule knopk ===*/  
.titles7 {
  display: block;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  background: #2E80B9;
  color: #FFF;
  text-shadow: 0 1px 0 #6B6B6B;
  padding: 4px 5px 5px 5px;
  font-size: 13px;
  border: 1px solid #597AB9;  
}
Kosten
Kosten 26.04.2016 00:239
0
Tventum, еще такая инициатива, и новый профиль делать нужно будет тебе, хотел сразу сделать с кнопкой, но теперь вижу сами все поставите как нужно.
FeStemBer
FeStemBer 26.04.2016 00:2610
0
Костен. но это простые стили, которые есть в интернете и видно, чтоб конфликта не было, прописал 7, специально под отдельный оттенок.
Kosten
Kosten 26.04.2016 02:1111
0
Все же попробовал родную кнопку поставить, это хорошо что есть DEMO, а там то она есть, а вот в самом материале не прописаны на ее стили. Вообщем, просто добавляем, к тем которые уже есть стили в CSS, это ниже прописываем, да такие большие и отвечают за такую небольшую кнопку отключить.



Код
.btn {
  background-color: #f6f6f6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(246, 246, 246)), to(rgb(225, 225, 225)));
  background-image: -webkit-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
  background-image: -moz-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
  background-image: -o-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
  background-image: -ms-linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
  background-image: linear-gradient(top, rgb(246, 246, 246), rgb(225, 225, 225));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f6f6f6', EndColorStr='#e1e1e1');
  border: 1px solid #ccc;
  color: #555;
  display: inline-block;
  padding: 5px 15px;
  text-decoration: none;
  text-shadow: 0 2px rgba(255,255,255,.9);
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  box-shadow: 0 1px rgba(0,0,0,.35);
  -moz-box-shadow: 0 1px rgba(0,0,0,.35);
  -webkit-box-shadow: 0 1px rgba(0,0,0,.35);
}
FeStemBer
FeStemBer 26.04.2016 02:1412
0
Видно что теней добавить нужно, а если они только в низу, то просто с белым фоном сливается, возможно так и задумано, так как сама кнопка также светлая, но по дизайн хорошо подошла.
Kosten
Kosten 26.04.2016 02:2113
0
Здесь если его устанавливать, то нужно специально под стили сделать файл и в CSS не нужно не чего прописывать, и должно нормально работать как и в стилях если поставить.
avatar