模态框(Modal)是覆盖在父窗体上的子窗体。通常，其目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下进行一些交互，子窗体提供一些交互或信息。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：模态框(Modal)插件</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</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" aria-hidden="true">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：模态框(Modal)插件的更多相关文章

  1. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  2. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  3. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  4. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. 黄聪：bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  6. Bootstrap 实例 - 模态框（Modal）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  8. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

  9. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. ps色彩混合

    http://tieba.baidu.com/p/2032536851?pn=1 HSB 这是一种颜色的表示方法:其中"H"表示色相,"S"表示饱和度,&quo ...

  2. IT兄弟连 Java语法教程 变量1

    什么是变量 在Java程序中,变量是基本的存储单元.是在程序运行中值可以改变的一块内存区域.变量是通过标识符(变量名).变量类型及可选的初始化器来定义的,此外,所有的变量都有作用域,作用域定义了变量的 ...

  3. .Net WebApi接口Swagger集成简单使用

    Swagger介绍 Swagger 是一款RESTFUL接口的.基于YAML.JSON语言的文档在线自动生成.代码自动生成的工具.而我最近做的项目用的是WebAPI,前后端完全分离,这时后端使用Swa ...

  4. P1101 单词方阵(DFS)

    题目描述 给一n \times nn×n的字母方阵,内可能蕴含多个"yizhong"单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 88个方向的任一方向,同一单词摆放时不再 ...

  5. scala worksheet demo

    object worksheet_lp { println("Welcome to the Scala worksheet") //> Welcome to the Scal ...

  6. 服务是如何加载并运行的, Kestrel、配置与环境

    服务是如何加载并运行的, Kestrel.配置与环境 "跨平台"后的ASP.Net Core是如何接收并处理请求的呢? 它的运行和处理机制和之前有什么不同? 本章从"宏观 ...

  7. (转)Linxu磁盘体系知识介绍及磁盘介绍

    Linxu磁盘体系知识介绍及磁盘介绍 系统管理 / 2017-01-14 / 0 条评论 / 浴春风 Linu磁盘设备基础知识指南磁盘速度快具备的条件: 1)主轴的转速5400/7200/10000/ ...

  8. Linux Ubuntu系统之PPP拨号经验分享

    近期,工作需要,我负责开发PPP拨号模块. 说起拨号,算算时间,我已经做过2次了, 暴露年龄了,呵呵. 第一次是刚毕业做的PPOE拨号,给电信做拨号软件,在河北石家庄工作过一段时间,基于windows ...

  9. GIT主要用到的命令

    git add . //添加到暂存盘 git commit -m ‘备注’//提交到本地仓库 git push //提交到远程仓库 fetch更新本地仓库两种方式: //方法一 $ git fetch ...

  10. ubuntu中安装vsftp

    1.安装 $ sudo apt-get install vsftpd 2. 配置 需要配置文件/etc/vsftpd.conf 来进行设置参数以对FTP进行控制,包括访问权限,流量等进行控制. 执行s ...