Bootstrap每天必学之模态框(Modal)插件
本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件。
一.基本使用
使用模态框的弹窗组件需要三层 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-*的属性声明来控制效果。
//空白背景且点击不关闭 data-backdrop="false" //按下 esc 不关闭 data-keyboard="false" //初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。 data-show="false" //加载一次 index.html 到容器内 href="index.html"
当然,也可以在 JavaScript 直接设置。
//通过 jQuery 方式声明 $('#myModal').modal({ show : true, backdrop : false, keyboard : false, remote : 'index.html', });
3.方法
如果说,默认不显示弹窗,那么怎么才能通过点击前后弹窗呢?
//点击显示弹窗 $('#btn').on('click', function() { $('#myModal').modal('show'); });
4.事件
模态框支持 4 种时间,分别对应弹出前、弹出后、关闭前和关闭后。
$('#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 Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09
- Query架构的开发人员能够创建一个插件代码来扩展其功能,从而能够产生一些最好的插件,让你的网站或任何给定的项目达到一个全新的水平。 ...2016-04-27
JS树形菜单组件Bootstrap TreeView使用方法详解
这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法,本文一部分针对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识,主要对比说明在Bootstrap开发中用到的这些技术要点,对此文感兴趣的朋友一起学习吧...2016-05-14- 这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法,感兴趣的小伙伴们可以参考一下...2016-01-29
- 这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
这篇文章主要介绍了基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)的相关资料,非常不错,需要的朋友可以参考下...2016-09-01基于Bootstrap的Metronic框架实现页面链接收藏夹功能
本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-09-01- 本文通过实例代码给大家介绍了bootstrap导航条效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧...2017-05-22
- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06