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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue的token刷新处理的方法
2018/07/17 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python与C互相调用的方法详解
2017/07/14 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python 自定义装饰器实例详解
2019/07/20 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Python使用Pygame绘制时钟
2020/11/29 Python
用python对excel查重
2020/12/07 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
优秀食品类广告词
2014/03/19 职场文书
品牌转让协议书
2014/08/20 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
教师岗位职责
2015/02/03 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
转学证明范本
2015/06/19 职场文书
法制工作总结2015
2015/07/23 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android