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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
javascript常用函数(2)
Nov 05 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Angular实现响应式表单
Aug 04 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
编写v-for循环的技巧汇总
Dec 01 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
node.js入门教程
2014/06/01 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python数据操作方法封装类实例
2017/06/23 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python库安装速度过慢解决方案
2020/07/14 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
给上级领导的感谢信
2015/01/22 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
运动会通讯稿100字
2015/07/20 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书