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">
//点击触发模态框显示
<!-- 模态声明,show 表示显示 -->
<div class="modal "id="myModal" 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>
<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">
//在窗口的主体部分使用栅格系统的流体
<!-- 模态声明,show 表示显示 -->
<div class="modal fade" id="myModal"> <!-- 窗口声明 -->
<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">
<!-- 主体 -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div>
</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>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 点击弹窗 </button>
效果图如下:
二.用法说明
基本使用介绍结束之后,我们就来看下插件的各种重要用法。所有的插件,都是基于 JavaScript/jQuery 的。那么,就有四个要素:用法、参数、方法和事件。
1.用法 第一种:可以通过 data 属性
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 模态框插件的更多相关文章
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
- BootStrap 模态框基本用法
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- 对bootstrap模态框的小尝试
bootstrap中有一个“模态框”插件,我理解的意思就是一个具有全局遮罩的弹窗提示,官方解释是:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗 ...
- js实现类bootstrap模态框动画
在pc端开发,模态框是一个很常用的插件,之前一直用的第三方插件,比如bootstrap,jQuery的模态框插件,最近还用了elementUI的.但是会发现其实动画效果都差不多,那么如何去实现这样一个 ...
- JavaScript:bootstrap 模态框的简单应用
最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...
随机推荐
- Notification通知
manager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); button = (Button) fi ...
- Hark的数据结构与算法练习之多路归并排序
算法说明 多路归并排序也叫k路归并排序,实际上是归并排序的扩展版,同样也是归并排序的一种,通常的应用场景的针对大数据量的排序. 实现过程: 1.从字面可以看出,多路归并就是将待排的大数据量分成K路,然 ...
- Loadrunner请求自定义的http(json)文件and参数化
Loadrunner请求自定义的http(json)文件and参数化 研究啦好些天这个东西啦 终于出来答案啦 嘿嘿 给大家分享一下 : 请求自定义的http文件用函数:web_custom_ ...
- JVM的启动流程
JVM工作原理和特点主要是指操作系统装入JVM,是通过jdk中Java.exe来完成,通过下面4步来完成JVM环境. 1.创建JVM装载环境和配置 2.装载JVM.dll 3.初始化JVM.dll并挂 ...
- SU Demos-02Filtering-07Sumedian
不足之处,欢迎批评指正. 先看脚本内容: 脚本中用到的4个参数文件,是一系列x,t数据对,数组(x,t) 运行结果,
- http://jingyan.baidu.com/album/03b2f78c4cc0ad5ea337ae7d.html
http://jingyan.baidu.com/album/03b2f78c4cc0ad5ea337ae7d.html
- 状压DP POJ 2411 Mondriaan'sDream
题目传送门 /* 题意:一个h*w的矩阵(1<=h,w<=11),只能放1*2的模块,问完全覆盖的不同放发有多少种? 状态压缩DP第一道:dp[i][j] 代表第i行的j状态下的种数(状态 ...
- it's hard to say
Ew,it's hard to begin.In fact I don't know what to say either.So here is a sad story.First of all ,m ...
- 游戏 tabpanel
using UnityEngine; using System.Collections; public class La : MonoBehaviour { private int select; p ...
- 修改setInterval作用域
Hello,今天和大家分享如何修改setInterval作用域. 0.引子 最近在做一个项目的时候需要开发一个图片轮播显示的组件,在实现过程中遇到了关于setInterval作用域的问题. Slide ...