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>

Yii2 框架下bootstrap 弹窗预览视频等~的更多相关文章

  1. 终极指南:如何为iOS8应用制作预览视频

    最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更大的iPhone 6,可穿戴设备Apple Watch,iOS8,以及旨在帮助用户更好的发现应用的App Store改版等等. 说到App St ...

  2. APP_Store - 怎样为iOS8应用制作预览视频

    关于iOS 8应用预览视频的话题,从设计.技术规范,到录屏.编辑工具,介绍的都比较详尽:建议收藏,在接下来用的到的时候作以参考.下面进入译文. 最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更 ...

  3. deepin linux下markdown实时预览

    # deepin linux下markdown实时预览 ## 参考文章------------------------------ [vim安装markdown插件](http://www.jians ...

  4. Yii2 框架下 session跨域共享互通

    在项目实施过程中,往往把一个大项目进行分拆成几个独立的项目,项目用完全独立的域名和文件,可以放到不同的服务器上的独立分项目. 几个子项目共用一个登录点. 原理简单来说就是服务端session 共享, ...

  5. ffmpeg实现视频文件合并/截取预览视频/抽取音频/crop(裁剪)(ffmpeg4.2.2)

    一,ffmpeg的安装 请参见: https://www.cnblogs.com/architectforest/p/12807683.html 说明:刘宏缔的架构森林是一个专注架构的博客,地址:ht ...

  6. IE8环境下的上传图片预览

    今天做一个需要在IE浏览器上使用的信息录入项目,遇到了图片上传预览的问题,找了一些资料,最后使用了IE自带的滤镜做到了 <!--HTML IE8不支持opacity,只能使用双层,一层背景半透明 ...

  7. 关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式

    IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...

  8. CPF C#跨平台UI框架发布安卓端预览版

    CPF的安卓端适配采用Xamarin的安卓绑定库,而不是Xamarin.Form.CPF和flutter差不多,完全由skia绘制,基本不依赖原生控件. 当前还只是预览版,不建议用在正式项目中. 可能 ...

  9. YII2框架下使用PHPExcel导出柱状图

    导出结果: 首先,到官网下载PHPExcel插件包,下载后文件夹如下: 将Classes文件夹放入到项目公共方法内. 新建控制器(访问导出的方法):EntryandexitController < ...

随机推荐

  1. 【布艺DIY】 零基础 做包包 2小时 就OK!_豆瓣

    [布艺DIY] 零基础 做包包 2小时 就OK!_豆瓣 [布艺DIY] 零基础 做包包 2小时 就OK!

  2. JAVA中常用需要设置的三个环境变量(JAVA_HOME、CLASSPATH、PATH)

    JAVA中常用需要设置的三个环境变量: JAVA_HOME.CLASSPATH.PATH (一) 配置环境变量:(相对路径) 1. JAVA_HOME=x:/jdk1.6.0 2. 用%JAVA_HO ...

  3. facl笔记

    文件系统访问列表:tom:    tom, tom基本组jerry: other:r-- chown FACL:Filesystem Access Control List利用文件扩展保存额外的访问控 ...

  4. drwtsn32.exe 遇到问题须要关闭。我们对此引起的不便表示抱歉

    我的机器老是这样.启动起来就有这个... 那位高手能告诉我这是怎么会事.故障的原因以及解决的办法. 最佳答案 drwtsn32.exe是windows的一项磁盘检查程序,同一时候也是鸡肋程序,最好的办 ...

  5. jQuery 事件 - error() 方法

    实例 如果图像不存在,则用一段预定义的文本取代它: $("img").error(function(){ $("img").replaceWith(" ...

  6. .NET AOP的实现

    一.AOP实现初步 AOP将软件系统分为两个部分:核心关注点和横切关注点.核心关注点更多的是Domain Logic,关注的是系统核心的业务:而横切关注点虽与核心的业务实现无关,但它却是一种更Comm ...

  7. SpringMvc学习-增删改查

    本节主要介绍SpringMVC简单的增删改查功能. 1.查询 dao中的代码 public List<WeatherPojo> getAllWeather(){ String sql=&q ...

  8. SQL Server中带事务的存储过程简单举例

    先来看一个概念: 数据库事务(Database Transaction) ,是指作为单个逻辑工作单元执行的一系列操作,要么完整地执行,要么完全地不执行.那么在存储过程里添加事务,则可以保证该事务里的所 ...

  9. -canOpenURL: failed for URL

    这在 Xcode 6.4 + iOS 8 时,是不会有的情况,原因是[为了强制增强数据访问安全, iOS9 默认会把所有从NSURLConnection . CFURL . NSURLSession发 ...

  10. Cortex-M3知识点

    1.不再像别的ARM7那样从thumb状态和ARM状态来回切换 Thumb-2指令集横空出世,Cortex-M3不支持ARM指令集 2.BKP备份寄存器(42个16位寄存器组成),用来存储用户应用程序 ...