Bootstrap——可拖动模态框(Model)
还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框。网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下,实现了基本弹框功能(可拖动)。
代码如下:
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>测试</title><link href="./src/css/bootstrap.min.css" rel="stylesheet"><style>html,body{width: 100%;height: 100%;padding: 0;margin: 0;}.div_main{width: 100%;height: 100%;background: gray;}.bacstyle{/* background: red; */width: 1000px;height: 600px;}/*当触发模态框时会产生一个阴影层覆盖整个页面,设置 modal-backdrop 可以去除阴影层*/.modal-backdrop {filter: alpha(opacity=0)!important;opacity: 0!important;}</style></head><body><div class="div_main"><!-- botton按钮有两个属性是data-toggle="model" data-target="#myModel";第一个属性代表我可以调取并展示一个模态框,第二个属性表示我要展示的哪一个模态框,用id来标识--><!-- data-backdrop="static"表示点击空白的地方不会关闭弹窗--><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" >打开惊喜</button><!-- class = "modal",用来把 <div> 的内容识别为模态框 class = "fade",当模态框被切换时,它会引起内容淡入淡出--><!-- tabindex=-1代表此元素禁止使用键盘上的tab键对其导航,就是按tab键的时候,会跳过这个div 不设置tabindex的话,就会使Esc退出无效 --><!-- role=“dialog”代表这是一个对话框 --><!-- 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上) --><div class="modal inmodal" id="myModal" role="dialog" aria-hidden="true"><div class="modal-dialog bacstyle"><div class="modal-content" style="width: 100%;height: 100%;"><!-- modal-header 是为模态窗口的头部定义样式的类 --><div class="modal-header" style="background: pink; width: 100%; height: 10%;"><!-- close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式 --><!-- data-dismiss="modal",是一个自定义的 HTML5 data 属性,在这里它被用于关闭模态窗口 --><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button><h4 class="modal-title">窗口标题</h4></div><!-- class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式 --><div class="modal-body" style="background: green; width: 100%; height: 90%;">湖人&&火箭总冠军</div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --><script src="./src/js/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="./src/js/bootstrap.min.js"></script><script src="./src/js/jquery-ui.min.js"></script><script>// 在模态框出现后添加可拖拽功能 $(document).on("show.bs.modal", ".modal", function() {// draggable 属性规定元素是否可拖动 $(this).draggable({handle: ".modal-header", // 只能点击头部拖动 cursor: 'move' //光标呈现为指示链接的指针(一只手), });$(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的 });</script></body> </html>
点击按钮,会弹框显示,并且弹框可以拖动
运行效果如下:
注意:
Bootstrap为v3版本
相应的js插件网上都可以轻松下载
转载于:https://www.cnblogs.com/FHC1994/p/11318271.html
Bootstrap——可拖动模态框(Model)相关推荐
- bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- Bootstrap系列之模态框(Modal)
文章の目录 1.工作原理 2.示例 2.1.Modal组件 2.2.在线演示 2.3.静态背景 2.4.滚动内容 2.5.垂直居中 2.6.提示和弹窗 2.7.使用网格 2.8.不同模态框的内容 2. ...
- 模态框-model dialog
模态框: 需要处理的弹框,用户需要处理完这个模态框才能继续主界面的操作. Bootstrap模态框 示例来自http://www.runoob.com/bootstrap/bootstrap-moda ...
- 【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
- Bootstrap学习之模态框(Modal)插件
Bootstrap每天必学之模态框(Modal)插件,模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互 ...
- bootstrap显示大图模态框
<!-- 显示大图模态框 --> <div class="modal fade text-center" id="showImgModal"& ...
- Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述 问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...
- BootStrap修改modal模态框的宽度
修改的不是modal这个div,而是modal-dialog这个div,代码如下 <div class="modal-dialog" style="width:11 ...
- Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景 对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
最新文章
- java常用注解及功能_SpringBoot 中常用注解及各种注解作用
- 程序员保值的4个秘密
- SAP Spartacus cxFocus增添了refresh Focus功能后的一些考虑
- echarts 柱状图圆柱_Echarts 柱状图配置详解
- 杭电--1009 C语言实现
- 7.Jenkins 权威指南 --- 分布式构建
- 递归神经网络的非零初始状态
- HashMap中,比较key是否相等为什么要重写equal() 和hashCode()这两个方法?
- 罗振宇解读《今日简史》:21个议题就是21个千亿美金的机会
- 用华为手机现在还不知道这5种实用功能,几千块白花了,太浪费了
- CMOS信噪比与感光面积的关系
- 投资经历(一:入市须谨慎)
- C语言如何读取一行数据,直到按空格结束
- Springboot毕业设计毕设作品,学生信息管理和新生报到系统 开题报告
- Scribus 1.4.2 发布,开源电子杂志制作软件
- nc 监听数据_nc命令使用解析大全
- 模糊聚类FCM的MATLAB实现
- 如何在python中制作超级玛丽_超级玛丽的 python 实现
- html的编程语言 背景色,易语言编程界面背景颜色以及文字颜色 [大牛莫笑]
- 机器学习之短信、邮件、新闻分类实战学习
热门文章
- python入门23 pymssql模块(python连接sql server增删改数据 )
- uva 524(Prime Ring Problem UVA - 524 )
- Node.js——异步上传文件
- C语言-结构体内存对齐
- EF里查看/修改实体的当前值、原始值和数据库值以及重写SaveChanges方法记录实体状态...
- 一、创建Assetbundle 在unity3d开发的游戏中,无论模型,音频,还是图片等,我们都做成Prefab,然后打包成Assetbundle,方便我们后面的使用,来达到资源的更新。
- C++获取PE文件的入口点
- 【Wax】使用Wax (framework方式,XCode 4.6)
- 币氪共识指数排行榜0910
- 记一次打包的诡异现象