专栏首页测试开发架构之路前端之bootstrap模态框

前端之bootstrap模态框

  简介:模态框(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 用于打开模态窗口。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分分钟搞懂union与union all

    SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集。 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的...

    互联网金融打杂
  • 微信小程序轮播图

    swiper标签 ? <!--index.wxml--> <swiper class="swiper" indicator-dots="true" au...

    互联网金融打杂
  • 0基础菜鸟学前端之Vue.js

      简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构 前端基础 Vue.js简介 Vue...

    互联网金融打杂
  • bootstrap 模态框 弹出框

    ('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

    用户5760343
  • bootstrap的模态框

    ydymz
  • 66. Vue 结合webpack使用jquery以及boostrap

    有时候在 Vue 框架开发的时候,还是存在需要使用 jquery 以及 boostrap 的场景的,这个时候就需要安装 Jquery 以及 boostrap 了...

    Devops海洋的渔夫
  • Bootstrap 模态框(Modal)插件的基本应用

    通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍,可以在不离开父窗体的情况下进行一些互动和内容的交互。

    德顺
  • 宏基因组学习笔记2

    metagenomics, 在希腊语中meta意思是超越的。宏基因组研究的目的是通过对菌种(株)的鉴定,获得真实的多样性数据,功能,协作和进化。宏基因组分析的三...

    用户1075469
  • Django 2.1.7 模型 - MVT模型增删功能

    上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容,丰富了不少模型中的字段类型。

    Devops海洋的渔夫
  • ios中iframe的scroll滚动事件替代方法

    deepcc

扫码关注云+社区

领取腾讯云代金券