Сообщений в теме: 5

[idal]

Добрый день.
Была поставлена такая задача, чтобы при в ходе на определенною страницу, всплывало модальное окно с видео, и ролик с youtube сразу начинал воспроизводится.
скрипт с http://jsfiddle.net/sAAn8/

Что сделал:

В head.tpl.html добавил:

{literal}
<script type="text/javascript">
$(document).ready(function() {
	    $('a[name=modal]').click(function(e) {
	    e.preventDefault();
	    var id = $(this).attr('href');
	    var maskHeight = $(document).height();
	    var maskWidth = $(window).width();
	    $('#mask').css({'width':maskWidth,'height':maskHeight});
	    $('#mask').fadeIn(1000);
	    $('#mask').fadeTo("slow",0.8);
	    var winH = $(window).height();
	    var winW = $(window).width();
	    $(id).css('top',  winH/2-$(id).height()/2);
	    $(id).css('left', winW/2-$(id).width()/2);
	    $(id).fadeIn(2000);
    });
$('a[name=modal]').click();
});
</script>
{/literal}

в style.css

#back {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    font-family: Georgia;
    }
#boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    border: 3px solid #078E18;
    box-shadow: 0 0 7px 1px #666;
    border-radius: 10px;   
    height:100%;
    display:none;
    z-index:9999;
    padding:20px;
    text-align: center;
    font-size: 23px;
    }
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    font-family: Georgia;
    }
#boxes #dialog {
    width:800px;
    height:600px;
    padding:10px;
    background-color:#E4F2FA;
    }

в статическую страницу

<a href="#dialog" name="modal">Link</a>
<div id="boxes" onclick="return hs.expand(this)">
<div id="dialog" class="window"><iframe width="100%" height="100%" src="http://www.youtube.com/embed/4zotw3CJTKQ?list=PL92B9FD74A443EE2B&amp;hl=ru_RU&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe></div>
<div id="mask">&nbsp;</div>

&autoplay=1 - воспроизведение со старта.

Не могу сделать так чтобы при клике на затемнение, окно закрывалось, подскажите пожалуйста. И еще одна проблемка, ролик проигрывается по кругу, как сделать чтобы он прокручивался один раз.

Заранее спасибо.

[eugene_wb]

обновил на jsfiidle, для того чтобы закрывалось при клике на маску

$(document).ready(function() {
	    $('#mask').click(function(e) {
		    $('#mask').hide();
		    $('#dialog').hide();
	    });
	    $('a[name=modal]').click(function(e) {
	    e.preventDefault();
	    var id = $(this).attr('href');
	    var maskHeight = $(document).height();
	    var maskWidth = $(window).width();
	    $('#mask').css({'width':maskWidth,'height':maskHeight});
	    $('#mask').fadeIn(1000);
	    $('#mask').fadeTo("slow",0.8);
	    var winH = $(window).height();
	    var winW = $(window).width();
	    $(id).css('top',  winH/2-$(id).height()/2);
	    $(id).css('left', winW/2-$(id).width()/2);
	    $(id).fadeIn(2000);
    });
});

[idal]

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

[eugene_wb]

обнулять контейнер ( innerhtml ) с видео при закрытии
и также само добавлять встраивание обьекта при открытии
не использовать iframe (только в том случае если запрещено встраивание)

[idal]

обнулять контейнер ( innerhtml ) с видео при закрытии
и также само добавлять встраивание обьекта при открытии
не использовать iframe (только в том случае если запрещено встраивание)

подскажете пожалуйста как это сделать.

[eugene_wb]

уже подсказал, использовать innerhtml
http://api.jquery.com/html/

P.S. а сделать уже готовое, к подсказкам не относится