» »

Красивое модальное окно на чистом CSS


Основном модальное окна идут с JavaScript и Query, здесь будет на чистых стилях CSS. Что не сколько не отличить как по функций или формату самому. Просто, будет все намного легче, что для вас будет удивительно, в плане его создание под свой сайт и безусловно сам дизайн. Здесь до этого также модальное окно залито было на сайт, с такой же постройкой его. Но это явно от всех будет отличатся, так как у него самые небольшие стили и все настройки по изменению гаммы цвета и кнопки, но ширина и сама длинна у всех идет, только здесь ширина автоматически определять будет.

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

Модальное окно на CSS

Давайте теперь разберем сам материал и установим его.

Но для начало стили в CSS поставим, там нет не одной ссылки. Только поставил border-radius для того, чтоб закруглить углы.

Код
.modal-window, #open-window {
display: none;
}
input:checked + .modal-window {
background: rgba(0, 0, 0, 0.5);
display: block;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
overflow-y: scroll;
z-index: 1000;
}
.window-container {background: #FFFFFF;margin: 10% auto;padding: 15px;width: 630px;border-radius: 5px;}
label {cursor: pointer;}


Теперь нам нужно каркас прописать, и чтоб на всех страницах показывалось окно, то ставим в низ сайта.

Код
<input type="checkbox" id="open-window">
<div class="modal-window">
<div class="window-container">
<div align="right"> <label for="open-window"><img border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/aAyurao.png"></label> </div>
<h2>Военная разведка</h2>
   
Здесь вы ставите информер или просто пишем правила сайта, вообщем то, для чего вы создаете его.
   
</div>
</div>


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

Код
<label for="open-window">Зайти на zornet.ru</label>


Вот и вся установка, что забыл сказать, закрывать его было в низу с левой стороны, и как то не удобно, перенес выше и в право, если вы так хотите оставить в низу, то там дивы уберите и все, станет как на источнике, но вообщем, здесь самому можно выстраивать как вы сами видите.
03.05.2016 Просмотров: 686 Комментарий: (8)

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

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

Комментарий: 6
Scheme
Scheme 03.05.2016 19:461
0
Стереотип - это устоявшееся отношение к происходящим событиям, выработанное на основе сравнения их с внутренними идеалами.

Можно просто написать, что окно не плохо сделано, а главный его плюс, что на CSS только в нем применены.
frecsarg
frecsarg 03.05.2016 19:492
0
Траст, брось сомнение и не паримся над свякой хренью, понравилось, забирай, все завидуют, это тебе по секрету скажу.
Kosten
Kosten 03.05.2016 19:523
0
Что скажите по синей кнопки, просто что то решил не ставить не темную и не красную. cool
Kosten
Kosten 03.05.2016 19:554
0
Траст, тебе не понять нашей души, но кто то на приколе может выехать и также понять, что в чем то ты не прав.

Давайте писать без ошибок, реально надоело исправлять и профессора траста тоже касается.
Сопрано
Сопрано 03.05.2016 20:095
0
Темным сделал, вод бы стилей добавить, чтоб как на градиенте был обзор, красиво было бы. Если только с этого модального окна взять, хотя оно также не чего смотрится, но мне больше нравится, когда кнопка внутри.
feliksteg
feliksteg 04.05.2016 23:546
0
Вот смотрю несколько окон и все чем то одинаковы, только вот стили разные и у некоторых еще в загрузку скрипт идёт.
avatar