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 相关文章推荐
基于jquery的图片幻灯展示源码
Jul 15 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
js模拟微博发布消息
Feb 23 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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 如何获取二维数组中某个key的集合
2014/06/03 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
vue-router 权限控制的示例代码
2017/09/21 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
检讨书1000字
2014/10/11 职场文书
关于颐和园的导游词
2015/01/30 职场文书
护士求职自荐信
2015/03/25 职场文书
整改通知书格式
2015/04/22 职场文书