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>

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204