默认的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. L259

    Few things can feel as crushing as being rejected by someone who you're either dating or romanticall ...

  2. Python 基础list 增删改查 解析

    一 增加     1 append 增加到最后一个列表      li = [ 1,3,4 ,'wang',]li.append('wangyan')print(li)[1, 3, 4, 'wang' ...

  3. javascript性能优化之使用对象、数组直接量代替典型的对象创建和赋值

    1.典型的对象创建和赋值操作代码示例 var myObject = new Object(); myObject.name = "Nicholas"; myObject.count ...

  4. express安装中出现无此命令

    原来,最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator),所以我们还需要安装一个命令工具,命令如下: 安装ex ...

  5. [BUG]数据库日期格式, 到页面是毫秒值

    springboot 配置文件

  6. 性能测试-3.Fiddler进行弱网测试

    fiddler模拟限速的原理(原文地址) 我们可以通过fiddler来模拟限速,因为fiddler本来就是个代理,它提供了客户端请求前和服务器响应前的回调接口,我们可以在这些接口里 面自定义一些逻辑. ...

  7. [转] Haproxy、Keepalived双主高可用负载均衡

    http://blog.chinaunix.net/uid-25266990-id-3989321.html 在测试了Nginx+Keepalived的负载均衡后,也对Haproxy+Keepaliv ...

  8. gl_PointSize偶数像素表现精准，基数会模糊化。

  9. 给Ubuntu软件升级命令

    以非root用户更新系统 sudo: sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用 ...

  10. 二叉树求逆序对(伪AC 23333)

    成链的时候 是最坏情况 O(n^2)的复杂度呢! 按照输入的数据 一个一个的插入建树 然后维护左右儿子的个数  (我们规定, 左儿子 小于  父亲  右儿子大于父亲) 往左走 说明存在逆序对 逆序对的 ...