Стрелок имеет правильный ответ; однако при первом щелчке ничего не происходит (до второго щелчка). После этого видео не будет загружаться, и я не могу закрыть лайтбокс.играет Vimeo в лайтбокс
Может ли кто-нибудь помочь в настройке?
Вот мой HTML:
<ul>
<li><a href="#">album name</a></li>
<li><a href="http://vimeo.com/13844810" class="lightbox_trigger" data-videoId="13844810">"Winter"</a></li>
<li><a href="#">album name</a></li>
<li><a href="#">video name</a></li>
</ul>
Вот мой Jquery:
$('.lightbox_trigger').click(function (e) {
e.preventDefault();
var videoId = $(this).data("videoId");
if ($('#lightbox').length > 0) {
$('#content').html('<iframe src="http://player.vimeo.com/video/'+videoId+'" width="640" height="480" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
$('#lightbox').show();
} else {
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<iframe src="http://player.vimeo.com/video/'+
videoId +
'" width="320" height="240" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' +
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('#lightbox').on('click', function() {
$(this).hide();
});
сделать из модального div jQuery ui http://jqueryui.com/dialog/#modal –