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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
理解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使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
图片之间的切换
2006/06/26 Javascript
超清晰的document对象详解
2007/02/27 Javascript
JS之小练习代码
2008/10/12 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jquery图片切换插件
2015/03/16 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery事件用法详解
2016/10/06 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python八皇后问题的解决方法
2018/09/27 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
销售实习自我鉴定
2013/12/07 职场文书
《乌塔》教学反思
2014/02/17 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS