默认的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. leetcode第11题：盛水最多的容器

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  2. 合并k个有序数组

    给定K个有序数组,每个数组有n个元素,想把这些数组合并成一个有序数组 可以利用最小堆完成,时间复杂度是O(nklogk),具体过程如下: 创建一个大小为n*k的数组保存最后的结果创建一个大小为k的最小 ...

  3. ES脑裂问题

    脑裂:一个集群中的不同节点对于集群的状态有了不一样的理解 ES集群的总体状态是red,本来9个节点的集群在结果中只显示4个节点在线: 正常情况下,集群中的所有节点应该对集群中的master的选择是一致 ...

  4. 启动apache 找不到 mbstring.dll

    启动appserv时 提示 无法启动此程序 因为计算机中丢失php mbstring.dll   这种原因一般都是组件加载顺序引起的,在php.ini文件里确保 extension=php_mbstr ...

  5. [转]Peer-to-Peer Communication Across Network Address Translators

    Peer-to-Peer Communication Across Network Address Translators Bryan Ford Massachusetts Institute of ...

  6. [LeetCode&Python] Problem 748. Shortest Completing Word

    Find the minimum length word from a given dictionary words, which has all the letters from the strin ...

  7. Linux 服务器配置、运行、不用敲命令(新手必备!) - 宝塔全攻略建站一条龙

    Linux 服务器配置.运行.不用敲命令 WordPress 建站攻略 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整 ...

  8. try catch之ajax调错

  9. centos 7 防火墙的使用 firewalld

    开启端口命令 输入firewall-cmd --query-port=6379/tcp,如果返回结果为no,那么证明6379端口确实没有开启. 输入firewall-cmd --add-port=63 ...

  10. Hive错误：Permission denied: user=anonymous, access=EXECUTE, inode=”/tmp”

    由于Hive没有hdfs:/tmp目录的权限,赋权限即可: hdfs dfs -chmod -R 777 /tmp