ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивое модальное окно на чистом CSS

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

Основном модальное окна идут с JavaScript и Query, здесь будет на чистых стилях 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 Мая 2016 Просмотров: 2951 Комментариев: (8)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 6
Порядок вывода комментариев: Scheme 03 Мая 2016 19:46¹ 0 Стереотип - это устоявшееся отношение к происходящим событиям, выработанное на основе сравнения их с внутренними идеалами. Можно просто написать, что окно не плохо сделано, а главный его плюс, что на CSS только в нем применены. frecsarg 03 Мая 2016 19:49² 0 Траст, брось сомнение и не паримся над свякой хренью, понравилось, забирай, все завидуют, это тебе по секрету скажу. Kosten 03 Мая 2016 19:52³ 0 Что скажите по синей кнопки, просто что то решил не ставить не темную и не красную. Kosten 03 Мая 2016 19:55⁴ 0 Траст, тебе не понять нашей души, но кто то на приколе может выехать и также понять, что в чем то ты не прав. Давайте писать без ошибок, реально надоело исправлять и профессора траста тоже касается. Сопрано 03 Мая 2016 20:09⁵ 0 Темным сделал, вод бы стилей добавить, чтоб как на градиенте был обзор, красиво было бы. Если только с этого модального окна взять, хотя оно также не чего смотрится, но мне больше нравится, когда кнопка внутри. feliksteg 04 Мая 2016 23:54⁶ 0 Вот смотрю несколько окон и все чем то одинаковы, только вот стили разные и у некоторых еще в загрузку скрипт идёт.