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”关键字 ...
随机推荐
- 官网下载到离线的Adobe Acrobat Reader DC
Adobe 官方 FTP :ftp://ftp.adobe.com/ Adobe Acrobat Reader DC 下载目录:ftp://ftp.adobe.com/pub/adobe/reader ...
- vm虚拟化问题积累
EXSi是什么?答:是一个独立的系统,承载了虚拟机管理台,虚拟机存储设备等核心要件的一个系统,需要靠客户机通过vsphere连接后进行管理. 问题集:一.建立桌面池找不到模板机问题: 目前因为此问题已 ...
- MySQL 源代码scr.rpm安装的一点注意事项
rpm安装包通常为二进制包(Binary)以及源代码包(Source)两种形式. 在使用源代码方式安装MySQL的时候,官方站点上下载的源代码包通常为scr.rpm格式,而不是直接的tar包.对此,须 ...
- div 点击展开
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min. ...
- 介绍Unity中相机的投影矩阵与剪切图像、投影概念
这篇作为上一篇的补充介绍,主要讲Unity里面的投影矩阵的问题: 上篇的链接写给VR手游开发小白的教程:(三)UnityVR插件CardboardSDKForUnity解析(二) 关于Unity中的C ...
- HTC Desire 816刷机教程（图文）
HTC Desire 816刷机教程也来了,今天在这里主要是来说说如何刷机的,这个刷机是采用卡刷的方式,也就是利用第三方的recovery来刷入第三方的zip包,因为第三方的zip包都是支持卡刷的,很 ...
- eclipse集成Python开发环境
话说近期听说 Python 非常牛, 非常强大, 至于到底有多强大, 俺作为一枚菜鸟也就不好发表太多评价. 言归正传, 本文教你在eclipse中安装 Python 插件, 以下我们就跟着步骤一起做吧 ...
- 转载：【原译】Erlang性能的八个误区（Efficiency Guide）
转自:http://www.cnblogs.com/futuredo/archive/2012/10/16/2725770.html The Eight Myths of Erlang Perform ...
- asp.net mvc中用angularJs写的增删改查的demo。初学者，求指点。。
直接给个代码下载链接.... http://pan.baidu.com/s/1FfVgq 本人刚刚学习angularJs,感觉双向数据绑定蛮爽的... 之前的代码存在点问题,已修复
- 【Java面试题】39 Set里的元素是不能重复的，那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
1.什么是Set?(what) Set是Collection容器的一个子接口,它不允许出现重复元素,当然也只允许有一个null对象. 2.如何来区分重复与否呢?(how) “ 用 iterator() ...