Bootstrap模态框插入视频的实现代码
下面代码实现别忘了前提是要在bootstrap框架下使用
一、效果
点击模态框
跳出自己已做好的MP4等格式视频
二、Bootstrap代码
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> ...< --这里写插入视频代码 -- > </div> </div> </div>
三、插入视频代码
注意video一些必要代码。如需解决兼容可以看这篇博客http://blog.csdn.net/w_linux/article/details/62890202
<video src="image/小“塍”故事.mp4" height="500" controls preload="metadata"></video>
四、总代码(我这里做了点改动,没有放在button里,问题不大)
<a data-toggle="modal" data-target=".bs-example-modal-lg">模态框</a> <!-- Large modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <video src="image/小“塍”故事.mp4" height="500" controls preload="metadata"></video> </div> </div> </div>
以上所述是小编给大家介绍的Bootstrap模态框插入视频的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关推荐
-
浅析BootStrap中Modal(模态框)使用心得
BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j
-
Bootstrap每天必学之模态框(Modal)插件
本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l
-
浅析BootStrap模态框的使用(经典)
BootStrap模态框简单概述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 1,Bootstrap 模态对话框和简单使用 div id="myModal" class="modal hide fade"> <div class="modal-he
-
Bootstrap模态框禁用空白处点击关闭
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不
-
Bootstrap模态框(modal)垂直居中的实例代码
Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b
-
Bootstrap模态框调用功能实现方法
近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi
-
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路: 1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加载页放置一个时间控件,测试通过 3,在模态框最外层放置一个时间控件,不通过 主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bo
-
Bootstrap模态框插入视频的实现代码
下面代码实现别忘了前提是要在bootstrap框架下使用 一.效果 点击模态框 跳出自己已做好的MP4等格式视频 二.Bootstrap代码 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button> <div class=&quo
-
BootStrap模态框闪退问题实例代码详解
模态框闪退到你还看不到模态框的内容呢,就屏幕灰了一下就是 代码如下 <!--搜索注册条--> <div class="container-fluid"> <form class="navbar-form navbar-center" role="Search"> <div class="form-group text-center col-sm-4"> <input typ
-
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下: <!--最外层包裹的模态框--> <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari
-
bootstrap模态框远程示例代码分享
本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
Bootstrap 模态框(Modal)插件代码解析
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my
-
bootstrap模态框示例代码分享
本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
-
BootStrap 模态框实现刷新网页并关闭功能
方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.
-
BootStrap模态框不垂直居中的解决方法
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){}); 在模态框显示之前我们用JS修改他的Top值, 具体代码如下: /** * 垂直居中模态框 **/ function centerModals() { $('.modal').each(function(i) { v
-
Bootstrap模态框案例解析
一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模
随机推荐
- php猜单词游戏
- python自动格式化json文件的方法
- 将txt文件名写入文件首行的bat代码(保留源文件)
- 用dos命令实现导入、导出windows计划任务详解
- Android开发之ContentProvider的使用详解
- Android中让图片自适应控件的大小的方法
- 解决RHAS3中Apache2的PHP上传文件大小的限制
- 一个漂亮的php验证码类(分享)
- python UNIX_TIMESTAMP时间处理方法分析
- Android自定义ViewGroup实现堆叠头像的点赞Layout
- jQuery 删除/替换DOM元素的几种方式
- VNC:Linux下的远程遥控专家
- JQuery获取鼠标进入和离开容器的方向
- 系统登陆就注销的解决方法
- 老生常谈Java动态编译(必看篇)
- java的Arrays工具类实战
- Android下如何使用百度地图sdk
- Laravel5.5中利用Passport实现Auth认证的方法
- 详解vue表单——小白速看
- 微信小程序显示倒计时功能示例【测试可用】