Модальное окно для вывода видео с YouTube и другой контент. Использует только jQuery, HTML и CSS. Сам крестик сделан на CSS. Если любите простоту то окошко должно Вам приглянуться.
1) Вставляем в стили:
.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;
}
2) На страницу добавляем следующий код:
<script>
function open_popup(box, width, height, yt) {
if(!$(box+' iframe').length && yt) {
$(box).append('<iframe id="yt" width="'+width+'" height="'+height+'" src="//www.youtube.com/embed/'+yt+'?rel=0&autoplay=1" 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>
(Для работы скрипта требуется jQuery)
Использование:
Для открытия окна используется функция open_popup(). Эта функция принимает 4 параметра (можно указать только один): идентификатор блока, ширина блока, высота блока, идентификатор видео YouTube
Пример использования модального окна с HTML кодом:
<div id="box-1" class="pop-up">
<div class="popup-close" onclick="close_popup('#box-1')"></div>
HTML код
</div>
<a href="#" onclick="open_popup('#box-1')">Открыть</a>
Пример использования модального окна с YouTube видео:
<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>