Bootstrap迁移系列 - Modal
对jQuery的依赖
请注意，所有JavaScript插件都依赖jQuery，在页面中的引入顺序可以参考基本模版。 bower.json中列出了Bootstrap所支持的jQuery版本。
3.x需要JQuery1.9.0以上版本，推荐V1.9.1(支持IE6+)
模态框组件（V3.0）的HTML结构发生了很大的改变。.modal-header、.modal-body和.modal-footer部分目前包含在了.modal-content和.modal-dialog中，为的是增强移动设备上的样式和行为特性。
在2.x中的实现效果
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>登录框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body style="background: #555;"> <div class="modal show" role="dialog">
<div class="modal-header">
<h3>登录</h3>
<p>请输入E-mail和密码</p>
</div>
<div class="modal-body">
<form action="admin/user/login" method="post" accept-charset="utf-8">
<table class="table">
<tr>
<td>Email</td>
<td><input type="text" name="email" value="" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" value="登入" class="btn btn-primary" /></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
© xiaobin_hlj80
</div>
</div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在3.x中的实现效果
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>登录框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body style="background: #555;"> <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>登录</h3>
<p>请输入E-mail和密码</p>
</div>
<div class="modal-body">
<form action="admin/user/login" method="post" accept-charset="utf-8">
<table class="table">
<tr>
<td>Email</td>
<td><input type="text" name="email" value="" class="form-control" placeholder="请输入你的E-mail" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="密码" value="" class="form-control" placeholder="请输入你的密码" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" value="登入" class="btn btn-primary btn-lg btn-block" /></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
© xiaobin_hlj80
</div>
</div>
</div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.modal-header、
.modal-body和
.modal-footer部分目前包含在了
.modal-content和
.modal-dialog中，为的是增强移动设备上的样式和行为特性。
Bootstrap迁移系列 - Modal的更多相关文章
- Bootstrap迁移系列 - Navbar
在V2.3.2版本中一个标准的导航栏模版如下: <div class="navbar"> <div class="navbar-inner"& ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap中的modal 模态弹出框不能放在 form_for里面，一弹出modal会自动submit掉form
bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- Bootstrap插件系列——Bootstrap-table初始化、分页、客户端搜索、服务端搜索
又好久不写博客,最近项目都是用的bootstrap的样式,不出意外,应该是要在bootstrap的道路上越走越远了,所以下定决心,把bootstrap的插件都好好学学. 昨天写了boostrap-ta ...
- bootstrap 多个 modal 相互遮挡
当一个页面有多个modal时,他们的z-index都是相同的,会产生一个模态框被另一个挡住,失去焦点 此时在模态框的div上加入style="display: none;"就可以.
- Bootstrap组件系列之福利篇几款好用的组件(推荐)
引用 :http://www.jb51.net/article/87189.htm 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字 ...
随机推荐
- BloomFilter——大规模数据处理利器[转]
原文链接:原文 Bloom Filter是由Bloom在1970年提出的一种多哈希函数映射的快速查找算法.通常应用在一些需要快速判断某个元素是否属于集合,但是并不严格要求100%正确的场合. 一. 实 ...
- Hive shell 命令
Hive shell 命令. 连接 hive shell 直接输入 hive 1.显示表 hive> show tables; OK test Time taken: 0.17 seconds, ...
- es 配置文件
[root@es02 config]# egrep -v "^(#|$)" elasticsearch.yml cluster.name: v5-applicationnode.n ...
- 简单十招提高jQuery执行效率
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
- asp.net一些面试题（转）
基础知识 什么是面向对象 面向对象OO = 面向对象的分析OOA + 面向对象的设计OOD + 面向对象的编程OOP: 通俗的解释就是万物皆对象,把所有的事物都看作一个个可以独立的对象(单元),它们可 ...
- tftp32作为dhcp服务器
/******************************************************************* * tftp32作为dhcp服务器 * 每次使用tftp进行文 ...
- qlineedit控件获得焦点
出处:http://blog.sina.com.cn/s/blog_640531380100wld9.html qlineedit控件获得焦点 lineEdit->setFocus();
- pacbio 原始下机数据h5 文件简介
pacbio 采用hdf5文件格式保存原始的下机数据,对于RS 测序系统而言,会产生一个 bas.h5 的文件; 以bas.h5 文件为例,看一下有下机数据中保存了那些信息 h5dump 工具可以用来 ...
- VNC轻松连接远程Linux桌面(1)
Linux平台安装VNCServer Windows平台使用VNC-Viewer 方法/步骤 在Linux平台安装VNCServer服务端软件包. #yum -y install vnc *v ...
- 一个窗口里包含一个iframe，点击iframe内的submit按钮，返回的视图总是显示在iframe中，我想要的效果是点击按钮后返回的视图是在浏览器窗口中...?asp.net mvc 的action中，不用js怎么实现??????????
Content("<script type='text/javascript'>parent.location.href = '" + url + "';&l ...