3.07.14, 14:24
0 комментарий
  Скрипты

Скрипт YouTube и другой контент в модальном окне

Модальное окно для вывода видео с 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&amp;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>
шаблоны для dle 11.2

Напишите своё мнение