Yii2 框架下bootstrap 弹窗预览视频等~

Yii2 本身已经引用了'yii\bootstrap\BootstrapAsset'，所以使用bootstrap 非常简洁。

1 在PHP页面引用命名空间 use app\assets\AppAsset;

2 可以直接在PHP页面书写要弹出的iframe的div;在此出可以设置弹窗的宽高，位置，对话框标题等

 <div class="modal fade" id="myModalpreview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"  data-backdrop="false">
   <div class="modal-dialog" style="width:800px;">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"  data-dismiss="modal" aria-hidden="true"> &times;  </button>
            <h4 class="modal-title" id="myModalLabel">
                   视频预览
            </h4>
         </div>
         <div class="modal-body">
            <iframe class='iframeedit' style="width:750px;min-height:500px;border:none;" src=""></iframe>
         </div>
      </div>
  </div>
</div>

3 给点击后弹窗按钮添加数据关联： 需要传输的数据名添加data-id来标志

<div class='itemvideopic' style='cursor:pointer;' data-id="<?=isset($videourlsthis[0])?$videourlsthis[0]:'null'?>" data-toggle='modal' data-target="#myModalpreview"></div>

4 重要的一步来了，书写JS将视频信息传递给iframe，方法为bootstrap自带的方法，

需要注意的事页面做了其他操作之后需要重新注册一下这个方法，可以封装起来，多次调用注册即可

$('#myModalpreview').on('show.bs.modal', function (event) {
　　var button = $(event.relatedTarget);
 　 var id = button.data('id');
　　var modal = $(this);
　　modal.find('.iframeedit').attr('src','/vod/modules/personalcourse/views/personalco/videopreview.php?id='+id);
});

5,视频预览的php页面代码

<?php
$videourls=$_REQUEST['id'];
?>
<div style='width:720px;height:450px;'>
<?php echo
"<script type='text/javascript' src='/vod/web/sewise.player.min.js'></script>"
?>
<?php echo
"<script type='text/javascript'>
SewisePlayer.setup({
	server: 'vod',
	type: 'flv',
	videourl: '{$videourls}',
	skin: 'vodWhite',
	title: '',
	lang: 'zh_CN',
	starttime:0
});
</script>"
?>
</div>

6效果如下：

7 bootstrap 处理文本过长的代码：（原理为文本过长显示省略号，鼠标放在文本上时，上方弹窗显示所有文本）

 <li  style='cursor:pointer;' class='courseunpublishitem' data-toggle="tooltip" data-placement="top" title="<?= $courseitem?>">
 <?= strlen($courseitem)>15?mb_substr($courseitem,0,5,'utf-8').'...':$courseitem ?>
  </li>