标签：
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"> × </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>
标签：
原文地址：http://www.cnblogs.com/mengsx/p/4767540.html
