简介：模态框（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. 【BZOJ2820】YY的GCD（莫比乌斯反演）

    [BZOJ2820]YY的GCD(莫比乌斯反演) 题面 讨厌权限题!!!提供洛谷题面 题解 单次询问\(O(n)\)是做过的一模一样的题目 但是现在很显然不行了, 于是继续推 \[ans=\sum_{ ...

  2. 【BZOJ2002】弹飞绵羊（Link-Cut Tree）

    [BZOJ2002]弹飞绵羊(Link-Cut Tree) 题面 题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lost ...

  3. .NET Core 配置Configuration杂谈

    前言 .NET Core 在配置文件的操作上相对于.NET Framework做了不少改变,今天来聊一聊.关于Configuration的Package都是以Microsoft.Extensions. ...

  4. Nancy启用跨站攻击防护（CSRF）

    什么是CSRF(跨站攻击) 可能很多人已经对CSRF有所了解,就简单的介绍下: CSRF全程是 Cross-Site Request Forgery .大概意思就是在登录用户不知情的情况下,由一个网站 ...

  5. php 命令行插件 － phpsh

    phpsh 是php的一个命令行插件,个人觉得很不错,在此简单介绍下: 1.安装 readline sudo easy_install readline 2.到 https://github.com/ ...

  6. 【Unity与23种设计模式】责任链模式（Chain of Responsibility）

    GoF中定义: "让一群对象都有机会来处理一项请求,以减少请求发送者与接收者之间的耦合度.将所有的接受对象串联起来,让请求沿着串接传递,直到有一个对象可以处理为止." 举个现实中的 ...

  7. 如何配置springboot一访问服务器本地图片

    大家好,之前写过一篇配置tomcat访问服务器本地资源的,但现在使用了springboot内嵌tomcat\jeyyt后,怎么来访问本地资源呢? 打好springboot框架后,在applicatio ...

  8. Jmeter + Ant 测试环境搭建 及解决问题: the <jmeter> type doesn't support nested text data

    1.首先确保测试机器中已经按照jdk1.6以上版本,如果没有,那就上官网下载吧. 2.下载Ant,解压至指定目录,并配置好环境变量:http://ant.apache.org/ 在命令行下执行ant ...

  9. python笔记之异常

    异常 內建异常在exceptions模块内,使用dir函数列出模块的内容. 自定义异常类:继承基类Exception. 异常可以使用raise语句引发,可以使用try ... except ... e ...

  10. PPT分享 | 以太坊钱包分析与介绍

    艾伯特AI人工智能(公众号:aibbtcom)按: (编者按:本文为姗姗来迟的Meetup系列推文.12月3日,林修平在亚太区以太坊社区培训与交流Meetup深圳站上跟我们分享了他对以太坊各种钱包模式 ...