» »

Стильно сделано модальное окно на CSS


Стильно сделано модальное окно на CSS

Кто решил установить на своем сайте модальное окно на jQuery и CSS то думаю это вам отлично подойдет. Так как оно простое по своей установке и работает отлично, а точнее так как вы сами его отрегулируете. Все не очень сложно, с ним идет скрипт, который поставить нужно в низ сайта. Но описываю как на тестовом сайте делал. Но основное считаю стили, ведь по ним можно выставить как саму ширину и длину окна, если вы ставите видео плеер, или просто пишите устав своего сайта. Здесь представлено похожее по своим свойствам модальное окно, только уже под темный дизайн сайта.

Как пример:

Простое модальное окно на jQuery и CSS

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

Здесь не стал прописывать коды, вы скачаете и на текстовом файле все будет прописано, где куда ставить, а так появляется стандартно, и как всегда идет под него затемнение, если к примеру у вас светло синий оттенок, то можете его сделать.
01.05.2016 Загрузок: 4 Просмотров: 677 Комментарий: (8)

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

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

Комментарий: 8
Сопрано
Сопрано 01.05.2016 21:461
0
В самом коде, где крестик стоит, можно попробовать же просто ссылку на кнопку поставить? Попробуй, если на тестовом стоит, просто не охота устанавливать и не куда.
Kosten
Kosten 01.05.2016 22:032
0
Что то даже и не подумал, а так все отлично подошло и красивей смотрится, но здесь кому как. Теперь где пишем или плеер ставим так будет с кнопкой.

Код
<a href="#dialog" name="modal">Простое модальное окно</a>
<div id="boxes">
  <div id="dialog" class="window">
<span><a href="#" class="close"/><img border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/9KXCMUU.png"></a>

  <iframe width="580" height="395" src="https://www.youtube.com/embed/kYGlSKi4XNs" frameborder="0" allowfullscreen></iframe>  
  
  </div>
  <div id="mask"></div>




Вообщем какой дизайн вы сделаете и кнопку подберете. Здесь просто темно светлый оттенок модального окна.
Сафрон
Сафрон 01.05.2016 22:243
0
Мне как то все равно, как там отключать, главное чтоб можно было, есть вообще, что на модальном окне нет не каких кнопок и оно будет исчезать по клику рядом с ним.
Angerfist
Angerfist 01.05.2016 23:404
0
Я тоже ради забавы модальное окно влепил на сайте с пояснением как заблокировать рекламу, не охота платить юкозу за сайт-хобби ради развлечения, а серьёзные сайты разворачивал на Джино там есть за что платить)
Kosten
Kosten 02.05.2016 00:065
0
Angerfist, да что то сам плотником на модальные окна присел, так ищу, но основном простые, чтоб вызов был, скрипт в низ сайта и стили.
Angerfist
Angerfist 02.05.2016 01:056
0
я кстати одно из твоих окон и взял, выбрал которое без js, вообще стараюсь избегать js) всё на css3 если возможность есть.
Kosten
Kosten 02.05.2016 01:397
0
Angerfist, если попадется модальное окно на CSS, то закидывай на сайт плиз.
feliksteg
feliksteg 02.05.2016 15:058
0
Просто, если идёт с одним стилем, не будет хорошего эффекта. Кому то нравятся они и пихаёт в тело сайта, кто то считает, чем меньше скриптов, тем загрузка больше, что правильно.
avatar