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插件网上都可以轻松下载
Bootstrap——可拖动模态框(Model)的更多相关文章
- Bootstrap Modals（模态框）
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...
- bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
- bootstrap课程11 模态框如何使用
bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...
- BootStrap的动态模态框及静态模态框
1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html&g ...
- bootstrap下使用模态框，在模态框内输入框中回车时，模态框自动关闭的问题及解决方法
使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交 $(do ...
- 拥Bootstrap入怀——模态框（modal）篇
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- bootstrap中的模态框（modal，弹出层）
默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- 【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
随机推荐
- PHP ftp_rmdir() 函数
定义和用法 The ftp_rmdir() 函数删除 FTP 服务器上的一个目录. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_rmdir(ftp_connectio ...
- 大数据学习路线，来qun里分享干货，
一.Linux lucene: 全文检索引擎的架构 solr: 基于lucene的全文搜索服务器,实现了可配置.可扩展并对查询性能进行了优化,并且提供了一个完善的功能管理界面. 推荐一个大数据学习群 ...
- bzoj1016题解
[解题思路] Kruskal的拓展. 可以先对边排序,进行一次Kruskal,判断是否可行,并计算出每种权值的边需要多少条. 然后暴力统计每种权值可行的方案数,根据乘法原理乘起来即可.复杂度o(210 ...
- csp-s模拟测试94
csp-s模拟测试94 一场简单题,打爆了.$T1$脑抽分解质因数准备分子分母消,想了半天发现$jb$互质直接上天,果断码了高精滚蛋.$T2$无脑手玩大样例,突然灵光一闪想到映射到前$K$大小的区间, ...
- 在fedora下面安装ftp服务器
Fedora版本:Fedora 12 1. 安装vsftp #yum install vsftpd 一路yes,最后提示安装成功. 2. 配置vsftpd.conf. #vi /etc/vsftpd/ ...
- 基于Netty的RPC架构学习笔记（二）：netty服务器
文章目录 简介 Netty服务端Hello World案例 举个
- 拾遗：Unix 守护进程编写规范
//标准库自带函数,通常以 daemon(0, 0) 方式调用 int daemon(int nochdir, int noclose) Linux: #include <unistd.h> ...
- Ehcache3.x学习（一）入门
简介 Ehcache 是一个开源的高性能缓存,拥有很高的拓展性和伸缩性,广泛使用各种 Java 项目中(如 Hibernate 默认使用 Ehcache作为二级缓存),在目前基于 Java 的缓存方案 ...
- linux最常用vim命令记录
先来一张图了解3种模式: 一.输入vim 命令,进入命令模式 此时可执行: 1.行号显示 (1):set nu 显示文本的行号: :nonu 取消显示行号 2.光标移动 (1)n<E ...
- 深夜Python - 第1夜 - for 迷 in 迷思
深夜Python - 第1夜 - for 迷 in 迷思 在一个月黑风高的夜晚,我悄悄打开编辑器,进入程序的世界.刚刚学会Python的我,由于一段时间的过度装B,被委托优化一段程序,我信心十足地接下 ...