» »

Модальное окно для видео YouTube и кода


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

YouTube и другое в модальном окне

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

Установка:

CSS:

Код
.pop-up {
  width: 500px;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 50%;
  margin-top: 100%;
  left: 50%;
  margin-left: -250px;
  z-index: 9;
  color: #fff;
  display: none;
}
   
.popup-close {
  width: 50px;
  margin-right: -60px;
  opacity: 0.8;
  float: right;  
  cursor: pointer;
}
   
.popup-l1, .popup-l2 {
  width: 6px;
  height: 50px;
  margin-top: -5px;
  margin-left: 22px;
  background: #fff;
}
   
.popup-l1 {
  float: left;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
   
.popup-l2 {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
   
.popup-close:hover {
  opacity: 1;
}


В низ сайта ставим код, в котором и будем прописывать видео, а точнее код плеера.

Код
<script>
function open_popup(box, width, height, yt) {
  if(!$(box+' iframe').length && yt) {
  $(box).append('<iframe width="760" height="415" src="https://www.youtube.com/embed/Wp9NZmOz1IE" frameborder="0" allowfullscreen></iframe>');
  }
  $(box+' .popup-close').html('<div class="popup-l1"></div><div class="popup-l2"></div>');
  if(width) $(box).css({'width': width, 'margin-left': -(width/2)});
  if(height) $(box).css({'height': height, 'margin-top': -(height/2)});
  else $(box).css('margin-top', -($(box).height()/2));
  $(box).show();
}
function close_popup(box) {
  $(box).hide();
  $(box+' #yt').remove();
}
</script>


Но и саму надпись, что вызывать будет

Код
<a href="#" onclick="open_popup('#box-2', 640, 360, 'IuQf4t0QWnE')">Смотреть</a>
   
<div id="box-2" class="pop-up"><div class="popup-close" onclick="close_popup('#box-2')"></div></div>


А вот этот вызов специально для HTML кода.

Код
<div id="box-1" class="pop-up">
  <div class="popup-close" onclick="close_popup('#box-1')"></div>
  Здесь пишем и также устанавливаем изображение.
</div>
<a href="#" onclick="open_popup('#box-1')">Открыть</a>


Вот такое простое модальное окно, которое не для каждого ресурса подойдет. А если есть портал прозрачный, но таких мало, то как раз можно для него делали, можно так сказать. Но на тестовом сайте проверил на этом дизайн шаблоне и скажу, очень красиво смотрится.
02.05.2016 Просмотров: 469 Комментарий: (7)

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

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

Комментарий: 7
Сопрано
Сопрано 02.05.2016 00:121
0
Но, как же без кошек, это уже не ресурс, так как если кота на нем нет. biggrin
А модальное окно, подойдет как раз под сообщение, там таблы стоят, а здесь так будет.
Alex_L_X
Alex_L_X 02.05.2016 00:142
0
кстать норм так канал сливки шоу biggrin
Kosten
Kosten 02.05.2016 01:403
0
Что за сливки, это так то модальное окно.)
Alex_L_X
Alex_L_X 02.05.2016 10:444
0
Sliwki шоу канал на Ютюбе, эта кошка оттуда, она постоянно в роликах у него. Кто не видел советую посмотреть ролики нормас
feliksteg
feliksteg 02.05.2016 15:036
0
Не чего у парня почти 5ярдов подписчиков и мало рекламы, что удивило.
feliksteg
feliksteg 02.05.2016 15:015
0
Нужна добавлять на каком браузере будет работать.
Сопрано
Сопрано 02.05.2016 18:007
0
На мозиле нормально работает, установил, что за Осел, там вообще редко что показывает, хотя можно посмотреть.
avatar