» »

Модальное окно простое в светлой гамме цвета


Модальное окно простое в светлой гамме цвета

Очередное модальное окно в светлом оттенке цвета, с яркой кнопкой отключить. Здесь заключается все в том, что вам нужно выставлять самому ширину или просто на высоту поставить avto, что будет автоматически делать. Просто не стал прописывать, так как все сами сможете сделать, а может кому и нравится, выставить самому как нужно. Есть на этот случай, также не сложное модальное окно, которое также идет для светлого дизайн, и там все уже настроено, но стиль как понимаете другой.

Все как и остальных, нужно настраивать в HTML, это как изображение поставить или просто описание, а какое оно будет, это все по тематике или какое вам нужно, перечислять можно много. Главное, что полностью рабочие, в нем только поменял кнопку и немного в стилях закруглил углы, что самому все можно редактировать. Также поставил плеер видео, и он вылез из окна, что понял, что подгонять как говорил, высоту сами будете, а так очень приятное по стилистике выполнено, где можно поменять ему гамму и сделать к примеру темным. И есть у него затемнение, что тоже выставляем, там сейчас стандартное стоит 0.7, чтоб сделать скрин вывел на один и как видите полностью затемненное стало.

Модальное окно с красивым эффектом

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

Переходим к установке:

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



Это стиль вставляем в ваше CSS:

Здесь как раз вы сможете выводить окно как вам нужно по диаметру.



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

Код
<div id="boxes">  
<div id="dialog" class="window">  
<p align="right"><a class="close" href="#"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/Button-Close-icon.png"></a></p>
  <p><div align="center"><span style="font-size:15pt"><b>ZorNet.Ru - про uCoz, все для</b></span></div></p><br>  
   
  <iframe width="560" height="315" src="https://www.youtube.com/embed/iz_wyPQHZ2E" frameborder="0" allowfullscreen></iframe>  

</div></div>  
<div id="mask"></div>


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

Код
<a href="#dialog" name="modal">Открыть окно</a>


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

Источник: Webo4ka.ru
30.04.2016 Просмотров: 340 Комментарий: (8)

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

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

Комментарий: 8
Сопрано
Сопрано 30.04.2016 20:261
0
Здесь нужно поработать немного, то видно по видео и немного заметно по описанию, что правая сторона больше левой, как то нужно кнопку немного отвести, а остальное в стилях сделать.
FeStemBer
FeStemBer 30.04.2016 20:312
0
Но написано, что кнопку поменяли, возможно она не потому размеру, так что или так сделать, чтоб оставить эту кнопку. Или просто зайти в поиск и найти меньше и должно встать все на свои места.
Kosten
Kosten 30.04.2016 21:077
0
По запросу "кнопка отключить png" забить в поиск и посмотреть, или просто эту можно сделать меньше, но здесь фотошоп нужен.
tsakonter
tsakonter 30.04.2016 20:353
0
Окно нормальное, можно сказать стандартное, а что авто поставить, то думаю нужно было сразу это сделать. Так как на вебочке смотрел, там это окно по другому сделано и фон там прописан ссылкой, что очень удивило, здесь смотрю исправлено.

Что хотел спросить, на тестовом сайте стоит красивый шрифт, что бы его на основной сайт не перекинуть.
Kosten
Kosten 30.04.2016 21:066
0
Что по штифту, так что то не чего не заметил, а вот по видео видно, но не чего, все можно сделать или как правильно, попробовать поставить кнопку меньше.
Tergran
Tergran 30.04.2016 20:404
0
Что одни светлые, есть же темные окна, они также красивые, но их меньше, если считать все, кроме белого цвета, но есть и не чего так они смотрятся.
Kosten
Kosten 30.04.2016 21:045
0
Но это можно сделать, а так есть одно окно темное, но что то оно не открывается, а так по своему стилю красиво бы на сайте смотрелось.
feliksteg
feliksteg 02.05.2016 15:118
0
Здесь же видно, что описание все по центру и правильно. Возможно логотип по размерам слишком длинный.
avatar