Boostrap模态窗口的学习小结


Posted in Javascript onMarch 28, 2016

 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。

一.什么是模态窗口?

是这样一种效果哟:

Boostrap模态窗口的学习小结

二. 组成

头部(包括标题和关闭按钮)

中间(主要内容)

底部(主要是放置操作按钮)

对应在html代码中的布局是:使用div容器元素,分别使用modal,modal-dialog,modal-cotent样式,而在modal-content内包含弹窗的header,body,footer,分别使用三个样式:modal-header,modal-body,modal-footer,如下图:

Boostrap模态窗口的学习小结

三,实现代码

<style>
.modal {//该样式是做背景容器的,100%充满全屏,还有当内容很多时,k可以在modal里进行滚动操作
position: fixed;//固定布局的
top: 0;
right: 0; //设置上下左右都为0,表示充满全屏
bottom: 0;
left: 0;
z-index: 1050;//提升z-index,防止其他元素溢出
display: none;//默认不显示
overflow: hidden;
-webkit-overflow-scrolling: touch;//支持移动设备上,触摸进行移动
outline: 0;//消除虚边框
}
.modal-dialog {
position: relative;//相对与Modal元素,进行相对定位
width: auto;//宽度自适应
margin: 10px;//外边距10像素
}
.modal-content {主要对弹窗进行边框,边距,背景色,阴影的处理
position: relative;//
background-color: #fff;
-webkit-background-clip: padding-box;//背景的裁剪区域设置从padding区域向外
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);//透明度设置
border-radius: 6px;
outline: 0;//取消轮廓显示
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header {//弹窗的头部设置
min-height: 16.42857143px;//最小高度设置
padding: 15px;
border-bottom: 1px solid #e5e5e5;//底部设细线,与modal-body区分
}
.modal-header .close {//关闭按钮
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;//头部内部的标题样式
}
.modal-body {//中间内容区域
position: relative;
padding: 15px;
}
.modal-footer {//底部设置
padding: 15px;
text-align: right;//居右对齐,一般都是按钮
border-top: 1px solid #e5e5e5;
}
</style>
<body>
<!-- <button data-toggle="modal" data-target="#popucss" class="btn btn-success" >单击弹出模态窗口</button> --><!-- //触发元素(使用声明式语法)
//弹窗主要内容 --><!-- //下面写id的是js使用方法(使用声明式语法)
//弹窗主要内容 -->
<button id="dianji" class="btn btn-success">单击弹出模态窗口</button>
<!-- 弹窗主要内容 -->
<div class="modal" id="dianjiji"><!-- 第一部分 -->
<div class="modal-dialog"><!-- 第二部分 -->
<div class="modal-content"><!-- 第三部分,主要部分 -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
</button>
<h2 class="modal-title">登录系统 </h2>
</div>
<div class="modal-body">
<p>弹窗里的具体内容,hhh ajbh </p>
</div>
<div class="modal-footer"> 
<button type="button" 
id="login" class="btn btn-success ">登录</button>
<button type="button" 
id="login" class="btn btn-success ">取消</button>
</div>
</div>
</div>
</div>
<script src="./bootstrap-3.3.5/dist/js/jquery.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/modal.js"></script>
<script>
$(function() {
$("#dianji").click(function() {
$("#dianjiji").modal("show");
});
})

Boostrap模态窗口的学习小结

四。Js 中的使用:

(1)声明式语法

data-toggle,data-target,给触发元素上设置,data-toggle的值必须为modal ,dat-target的值是:css选择符

(2)javascript用法:

1)使用属性控制:backdrop 布尔值 值为true,则单击背景(不包括弹窗本身)时,关闭弹窗,否则,反之。

keyboard 布尔值 值为true,则按esc时,关闭弹窗,否则反之。
$("#dianjiji").modal({
backdrop:true,
keyboard:false,
show:true;
})

2)使用参数控制:toggle $(“#mymodal”).modal(“toggle”),触发时,反弹窗口的状态,

Show $(“#mymodal”).modal(“show”),触发时,显示弹窗
Hide $(“#mymodal”).modal(“hide”),触发时,关闭

3)使用方法控制:

Show.bs.modal 在show方法调用时立即触发
Shown.bs.modal 该事件在模态弹窗完全显示给用户之后,触发
Hide.bs.modal 在hide方法调用时,立即触发
Hiden.bs.modal 该事件在模态弹窗隐藏之后触发
使用方法
$(“#mymodal”).on(‘方法名',function(e){
//处理代码。。。
})

关于Boostrap模态窗口的学习小结,小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
JavaScript常用本地对象小结
Mar 28 #Javascript
Bootstrap 粘页脚效果
Mar 28 #Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
分享一个简单的python读写文件脚本
2017/11/25 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
高级护理实习生自荐信
2013/09/28 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
小学生读书感言
2014/02/12 职场文书
作文批改评语大全
2014/04/23 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
团结主题班会
2015/08/13 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
python可视化之颜色映射详解
2021/09/15 Python