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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
vue vant Area组件使用详解
Dec 09 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
解析link_mysql的php版
2013/06/30 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
一些Unix笔试题和面试题
2013/01/22 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
幼儿园教学管理制度
2014/02/04 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
专业技术职务聘任书
2014/03/29 职场文书
《秋游》教学反思
2014/04/24 职场文书
团支部建设方案
2014/05/02 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
天地会口号
2014/06/17 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书