模态框(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. Unite Europe案例项目《影子战术》层级优化经验分享

    http://forum.china.unity3d.com/thread-25087-1-9.html 在Unite Europe 2017的Keynote主题演讲中,我们为大家分享了将主机游戏&l ...

  2. CentOS设置代理, yum, wget

    /etc # vi yum.conf [main] cachedir=/var/cache/yum/basearch/releasever keepcache=0 debuglevel=2 logfi ...

  3. Hadoop安装包下载方法

    Hadoop3.0版本的诞生,引入了很多新功能,为了验证Hadoop2.0与3.0版本的性能,需下载Hadoop的不同版本.故下文演示如何下载Hadoop安装包的方法. 1. 进入Apache Had ...

  4. Linux常用命令（补充）--其他

    其他1)记录命令历史(1)!! (连续两个”!”),表示执行上一条指令:(2)!n(这里的n是数字),表示执行命令历史中第n条指令,例如”!100”表示执行命令历史中第100个命令:(3)!字符串(字 ...

  5. CentOS6.7 i686上安装JDK7

    内核版本: [root@heima01 java]# uname -a Linux heima01 2.6.32-573.el6.i686 #1 SMP Thu Jul 23 12:37:35 UTC ...

  6. POJ3694 Network 边双缩点+LCA+并查集

    辣鸡错误:把dfs和ldfs搞混...QAQ 题意:给定一个无向图,然后查询q次,求每次查询就在图上增加一条边,求剩余割边的个数. 先把边双缩点,然后预处理出LCA的倍增数组: 然后加边时,从u往上跳 ...

  7. Codeforces 1114F（欧拉函数、线段树）

    AC通道 要点 欧拉函数对于素数有一些性质,考虑将输入数据唯一分解后进行素数下的处理. 对于素数\(p\)有:\(\phi(p^k)=p^{k-1}*(p-1)=p^k*\frac{p-1}{p}\) ...

  8. Core 事件总

    NET Core 事件总线,分布式事务解决方案:CAP 背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用的过程中 ...

  9. Qt5.7中使用MySQL Driver（需要把libmysql.dll文件拷贝到Qt的bin目录中。或者自己编译的时候，链接静态库）

    Qt5.7中使用MySQL Driver 1.使用环境 Qt5.7的安装安装就已经带了MySQL Driver,只需要在安装的时候选择一下即可.如果没有安装,可以采取自己编译的方式.在Qt的源码包的q ...

  10. (转)使用参数SQL_SLAVE_SKIP_COUNTER处理mysql slave同步错误讨论

    使用参数SQL_SLAVE_SKIP_COUNTER处理mysql slave同步错误讨论 本文链接地址:http://blog.chinaunix.net/uid-31396856-id-57532 ...