简介：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

  • Modal简介
  • Modal实现弹出表单
  • Modal实现删除提示框
  • 其他用法

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 模态框（Modal）插件</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

​

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

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

    开始演示模态框

</button>

<!-- 模态框（Modal） -->

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

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                    &times;

                </button>

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

                    模态框（Modal）标题

                </h4>

            </div>

            <div class="modal-body">

                在这里添加一些文本

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                </button>

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

                    提交更改

                </button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

</html>

代码讲解：

  • 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
  • 如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点：
    1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
    2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
  • aria-labelledby="myModalLabel"，该属性引用模态框的标题。
  • 属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
  • <div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
  • class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
  • data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
  • class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
  • class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
  • data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

前端之bootstrap模态框的更多相关文章

  1. 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题

    WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...

  2. JavaScript：bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  3. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  4. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  5. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  6. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  7. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  8. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  9. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

随机推荐

  1. 【NOIP2015】斗地主（搜索，贪心）

    题面戳我 题解 我原来也觉得是一道不可做的难题.. 其实,,,很简单的啦... 对于当前状态 我们出牌的方式大致分为两类 一类是不用考虑点数的,包括单张,对子,三带一等 另一类就是需要考虑点数的,包括 ...

  2. Spring入门看这一篇就够了

    前言 前面已经学习了Struts2和Hibernate框架了.接下来学习的是Spring框架...本博文主要是引入Spring框架... Spring介绍 Spring诞生: 创建Spring的目的就 ...

  3. 小程序input输入框获取焦点时，文字会出现闪动

    最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...

  4. 毫秒级检测！你见过带GPU的树莓派吗？

    树莓派3B+英特尔神经计算棒进行高速目标检测 转载请注明作者梦里茶 代码: 训练数据预处理: https://gist.github.com/ahangchen/ae1b7562c1f93fdad1d ...

  5. 我的C++学习之旅

    说在前面:1.学习缘由及学习途径: 在学了Python,c#(自认为未精通)之后,我决定学一下C++. 于是去网上找视频教程,发现都不适合我这种有一定基础的自学者,要么是不完整的高级教程,要么是零基础 ...

  6. NOIP2017 总结

    联赛结束,但是我并没有得到预期的结果,特写此文分析原因,希望我不会就此退役. 回顾一年,我做了什么? 2016年联赛,我水了两天,抱着挂掉的心态拿到了1=. 2016-2017寒假,参加集训,三天考试 ...

  7. Lastpass——密码管理工具

    Lastpass是一个优秀的在线密码管理器和页面过滤器,采用了强大的加密算法,自动登录/云同步/跨平台/支持多款浏览器. 我之前一直都在使用这个工具,不过都是在浏览器上以扩展的方式使用,在火狐浏览器上 ...

  8. asp.net-基础-20180319

    建立动态web . .net的一部分. HTML:超文本标记语言.WWW浏览器上文档的格式化语言. HTTP:超文本传输协议.WWW浏览器与服务器应用层通信协议. 静态页面:不需要服务器额外代码处理的 ...

  9. Silverlight的认识

    Microsoft Silverlight是一个跨浏览器的.跨平台的插件.Silverlight提供灵活的编程模型,并可以很方便地集成到现有的网络应用程序中.Silverlight可以对运行在Mac或 ...

  10. python解决图的最短路径问题

    在hihoCoder上遇到一个算法题目,描述如下: 对图结构有了解的不难发现,这是经典的求图的最短路径问题.以下是python代码: def findMin(row): minL = max(row) ...