Bootstrap每天必学之模态框(Modal)插件


Posted in Javascript onApril 26, 2016

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件。

更多关于Bootstrap模态框插件内容请点击专题《Bootstrap Modal使用教程》进行学习,希望大家喜欢,下面继续

一.基本使用
使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层)、
dialog(窗口声明层)、content(内容层)。在内容层里面,还有三层,分别为 header(头部)、body(主体)、footer(注脚)。
//基本实例

<!-- 模态声明,show 表示显示 -->
<div class="modal show" tabindex="-1">
 <!-- 窗口声明 -->
 <div class="modal-dialog">
 <!-- 内容声明 -->
 <div class="modal-content">
 <!-- 头部 -->
 <div class="modal-header">
 <button type="button" class="close"
 data-dismiss="modal">
 <span>×</span>
 </button>
 <h4 class="modal-title">会员登录</h4>
 </div>
 <!-- 主体 -->
 <div class="modal-body">
 <p>
 暂时无法登录会员
 </p>
 </div>
 <!-- 注脚 -->
 <div class="modal-footer">
 <button type="button" class="btn btn-default">
 注册
 </button>
 <button type="button" class="btn btn-primary">
 登录
 </button>
 </div>
 </div>
 </div>
</div>

如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要做如下操作。

//模态框去掉 show,增加一个 id

<div class="modal" id="myModal">
//点击触发模态框显示

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 点击弹窗
</button>
//弹窗的大小有三种,默认情况下是正常,还有 lg(大)和 sm(小)

<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可设置淡入淡出效果

<div class="modal fade" id="myModal">
//在主体部分使用栅格系统中的流体


<!-- 主体 -->
<div class="modal-body">
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-4">
 1
 </div>
 <div class="col-md-4">
 1
 </div>
 <div class="col-md-4">
 1
 </div>
 </div>
 </div>
</div>

二.用法说明
基本使用介绍结束之后,我们就来看下插件的各种重要用法。所有的插件,都是基于JavaScript/jQuery 的。那么,就有四个要素:用法、参数、方法和事件。
1.用法
第一种:可以通过 data 属性

//data-toggle

data-toggle="modal" data-target="#myModal"

data-toggle 表示触发类型
data-target 表示触发的节点

如果不是使用<button>, 而是<a>, 其中 data-target 也可以使用 href="#myModal"

取代。当然,我们建议使用 data-target。除了 data-toggle 和 data-target 两个声明属性外,还有一些可以用选项。

2.参数
可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

Bootstrap每天必学之模态框(Modal)插件

//空白背景且点击不关闭

data-backdrop="false"
//按下 esc 不关闭

data-keyboard="false"
//初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。

data-show="false"
//加载一次 index.html 到容器内

href="index.html"

当然,也可以在 JavaScript 直接设置。

Bootstrap每天必学之模态框(Modal)插件

//通过 jQuery 方式声明

$('#myModal').modal({
 show : true,
 backdrop : false,
 keyboard : false,
 remote : 'index.html',
});

3.方法
如果说,默认不显示弹窗,那么怎么才能通过点击前后弹窗呢?

Bootstrap每天必学之模态框(Modal)插件

//点击显示弹窗

$('#btn').on('click', function() {
 $('#myModal').modal('show');
});

4.事件
模态框支持 4 种时间,分别对应弹出前、弹出后、关闭前和关闭后。

Bootstrap每天必学之模态框(Modal)插件

$('#myModal').on('show.bs.modal', function() {
 alert('在 show 方法调用时立即触发!');
});

$('#myModal').on('shown.bs.modal', function() {
 alert('在模态框显示完毕后触发!');
});

$('#myModal').on('hide.bs.modal', function() {
 alert('在 hide 方法调用时立即触发!');
});

$('#myModal').on('hiden.bs.modal', function() {
 alert('在模态框显示完毕后触发!');
});

$('#myModal').on('loaded.bs.modal', function() {
 alert('远程数据加载完毕后触发!');
});

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
js实现京东轮播图效果
Jun 30 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
深入理解JS中的substr和substring
Apr 26 #Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 #Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 #Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 #Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 #Javascript
js 求时间差的实现代码
Apr 26 #Javascript
Bootstrap表单组件教程详解
Apr 26 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
django的model操作汇整详解
2019/07/26 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
公积金转移接收函
2014/01/11 职场文书
利群广告词
2014/03/20 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python