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中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
PassWord输入框代码分享
Jun 07 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
用PHP调用数据库的存贮过程
2006/10/09 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python生成随机MAC地址
2015/03/10 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
教师研修随笔感言
2014/01/23 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
学校师德承诺书
2014/05/23 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技