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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 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模板页面中分页代码的解析
2009/02/06 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
详解js的六大数据类型
2016/12/27 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
vue实现购物车案例
2020/05/30 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python常用算法学习基础教程
2017/04/13 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python偏函数实现原理及应用
2020/11/20 Python
python中的unittest框架实例详解
2021/02/05 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
一份Java笔试题
2012/02/21 面试题
部门年终奖分配方案
2014/05/07 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2014年组织部工作总结
2014/11/14 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书