Foreach видео создать модал

Question

Foreach видео создать модал

Я пытаюсь перебрать массив видео и создать кнопку / модальное комбо для каждого. У меня проблема с необходимостью для id = «myModal». Кнопка каждого видео ссылается на одно и то же видео. Как бы мне сохранить эти уникальные? Я пытался изменить id на класс, но это не сработало.

    <?php foreach ($thisVideos as $video):?>
<button class="btn btn-primary link">Video</button>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script>
$('.link').click(function () {
var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});

$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
<?php endforeach; ?>

2

bootstrap-modal codeigniter jquery php twitter-bootstrap

Решение

Другие решения

Может быть, это поможет вам

<?php foreach ($thisVideos as $key=>$video):?>
..............
<div id="myModal_<?php echo $key; ?>" class="modal fade"....................
..............
<script>
$('.link').click(function () {
var src = 'http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>';
$('#myModal_<?php echo $key; ?>').modal('show');
$('#myModal_<?php echo $key; ?> iframe').attr('src', src);
});

$('#myModal_<?php echo $key; ?> button').click(function () {
$('#myModal_<?php echo $key; ?> iframe').removeAttr('src');
});
</script>
<?php endforeach; ?>

Надеюсь, вы понимаете, и это поможет вам.
Заметка Это не очень хороший способ. Он просто решает так, как вы хотите.

0

Хитрость заключается в том, чтобы иметь уникальный идентификатор для #myModal и это может быть сделано разными способами.

Вы можете легко установить счетчик в вашем цикле, например,

 $counter = $counter++;

присоединять

<div id="myModal_<?=$counter?>"

и в JS вы должны иметь

$('#myModal_<?=$counter?>')

Это даст уникальную идентификацию ссылки на кнопку видео, и все ссылки будут работать.

0

Источник

Accepted Answer

Ваш подход неверен, вам нужен только один модальный элемент и один скрипт (и один обработчик событий …), поэтому вы помещаете их вне цикла. Вы можете добавить URL-адрес в атрибут данных в вашем списке видео, а затем вы можете делать все, что вам нужно сделать.

Простой пример с вашим кодом:

<?php foreach ($thisVideos as $video): ?>
<button class="btn btn-primary link"data-url="http://www.youtube.com/v/<?=$video["entry_data"]["video-id"]?>">Video</button>
<?php endforeach; ?><div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script>
$('.link').click(function () {
// get the url from the data attribute
var src = $(this).data('url');

$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});

$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>

0