默认的modal示例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Modal</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    Launch demo modal

</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">×</span>

                </button>

                <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>

            <div class="modal-body">

                <p>One fine body…</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary">Save</button>

            </div>

        </div>

    </div>

</div>

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>
  1. 为 .modal 添加 role="dialog"，用于指定模态框为对话框。
  2. 为 .modal-dialog 添加 aria-hidden="true" 属性。
  3. 通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

关闭动画

如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。

调用模态框一：

<button type="button" class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="测试">测试</button>

调用模态框二：

1、手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。

$('#myModal').modal('toggle')

2、手动打开模态框。在模态框显示之前返回到主调函数中 （也就是，在触发 shown.bs.modal 事件之前）。

$('#myModal').modal('show')

3、手动隐藏模态框。在模态框隐藏之前返回到主调函数中 （也就是，在触发 hidden.bs.modal 事件之前）。

$('#myModal').modal('hide')

4、更新模态框，在模态框动态添加或删除内容时：

　$('#myModal').modal('handleUpdate')

例：
//会议签到事件

    function signButton(confId) {

        $('#myModal_sing').modal('toggle');

        event.stopPropagation();

    }

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.modal 在调用 show 方法后触发。 
$('#identifier').on('show.bs.modal', function () {

  // 执行一些动作...

})
shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 
$('#identifier').on('shown.bs.modal', function () {

  // 执行一些动作...

})
hide.bs.modal 当调用 hide 实例方法时触发。 
$('#identifier').on('hide.bs.modal', function () {

  // 执行一些动作...

})
hidden.bs.modal 当模态框完全对用户隐藏时触发。 
$('#identifier').on('hidden.bs.modal', function () {

  // 执行一些动作...

})
 
 

bootstrap中的模态框（modal，弹出层）的更多相关文章

  1. Bootstrap的模态框无法弹出的问题

    今天在使用Bootstrap官网所提供的模态框插件时候发现其中的 可选尺寸模态框 无法弹出 在模态框前使用过其他 Bootstrap的js插件,可以正常使用,说明所需依赖js文件已经正常引用 注意:j ...

  2. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  3. Html中模态框（弹出框）使用入门

    作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮         <input class="btn btn-success" i ...

  4. fastadmin模态框（弹出框）

    用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...

  5. 关于bootstrap的modal弹出层嵌套子Modal所引发的血案（转）

    原文地址 http://blog.csdn.net/liuxiaogangqq/article/details/51821359 bootstrap的弹出层嵌套有一个问题 ,当子modal关闭时父的m ...

  6. 求出数组中所有数字的和&&弹出层效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Vue SPA应用中使用Layer的iframe 弹出层,并且传值

    问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...

  8. 在Bootstrap中得模态框（modal）中下拉不能显示得问题

    $.fn.modal.Constructor.prototype.enforceFocus = function () { $("#insertModal").on("s ...

  9. Bootstrap学习5--bootstrap中的模态框（modal，弹出层）

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

随机推荐

  1. python监控服务器的主备模式

    #-*- coding:utf8 -*-import paramikoimport re def check_active_ac(intervals=1): client = paramiko.Tra ...

  2. Python写一个批量生成账号的函数

    批量生成账户信息,产生的账户由@sina.com结尾,长度由用户输入,产生多少条也由用户输入,用户名不能重复,用户名必须由大写字母.小写字母和数字组成. def Users(num,len): # n ...

  3. mysql随机查询记录的高效率方法

    mysql使用rand随机查询记录的高效率方法 一直以为mysql随机查询几条数据,就用 SELECT * FROM `table` ORDER BY RAND() LIMIT 5 就可以了. 但是真 ...

  4. idea【取消多行】

    有时间把idea总结一下 idea打开很多文件时默认收起来就很烦. 这样可以取消多行 效果大概是这样 .酥服哒.

  5. [link] 构建负载均衡服务器之一 负载均衡与集群详解

    一.什么是负载均衡 首先我们先介绍一下什么是负载均衡: 负载平衡(Load balancing)是一种计算机网络技术,用来在多个计算机(计算机集群).网络连接.CPU.磁盘驱动器或其他资源中分配负载, ...

  6. Xposed Hook & Anti-hook

    一点简单记录. xposed原理包括将hook的method转为Native.因此可检测如下: for (ApplicationInfo applicationInfo : applicationIn ...

  7. 【linux基础】V4L2介绍

    参考 1. https://www.cnblogs.com/hzhida/archive/2012/05/29/2524351.html 2. https://www.cnblogs.com/hzhi ...

  8. 九度OJ-1042-最长公共子序列（LCS）

    题目1042:Coincidence 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4045 解决:2208 题目描述: Find a longest common subsequence ...

  9. 九度OJ-1112-导弹拦截-最长不增子序列

    题目1112:拦截导弹 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5218 解决:2603 题目描述: 某国为了防御敌国的导弹袭击,开发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺 ...

  10. 《网页文档/文字复制方法大全》 - imsoft.cnblogs

    <网页文档/文字复制方法大全> 一: 1.首先,找到自己要的文档. 2.文章题目复制,在搜索引擎的框框里输入:site:wenku.baidu.com "题目"/sit ...