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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
js实现简单的倒计时
Jan 28 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
先进事迹演讲稿
2014/09/01 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2016年寒假见闻
2015/10/10 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android