#Bootstrap 模态框（Modal）插件 详细讲解
#####第一步：
加载框架：
-
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
2.bootstrap.js 或压缩版的 bootstrap.min.js
#####第二步：
用法
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：
$('#identifier').modal(options)
#####使用代码1（一个ID弹出）：
<!-- 按钮触发模态框 data-toggle="modal" 点击这个按钮会触发模态框 data-target="#myModal 这个是点击后回触发哪个模态框？ 唯一的id标识-->
<!--data-backdrop="static" 这个说明，只能点击关闭按钮X 才能关闭弹窗，点击其他区域都不能关闭弹窗-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static">点击弹窗</button>
<!-- 模态框（Modal） 然后给模态框标识唯一的id 来区分不同的模态框 modal fade 淡入淡出的效果-->
<div class="modal fade" id="myModal" tabindex="-1" >
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<!--class="close" 给关闭按钮样式 data-dismiss="modal" 当点击这个关闭按钮时 关闭弹窗-->
<h4 class="modal-title" style="width: 100%;">会员登录</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ><span>×</span></button>
</div>
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱账号/手机号">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label >
<input type="checkbox" > 记住密码
</label>
</div>
</div>
</div>
<p class="text-muted">还没有账号？</p>
<a href="http://wwww.baidu.com"><p class="text-info text-right">忘记密码？</p></a>
<!-- 注册按钮-->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModa2" data-backdrop="static" >点击弹窗</button>
<button type="button" class="btn btn-success btn-block">登录 </button>
</form>
<!-- 注册表单 -->
<form action="" method="post" class="form-horizontal" id="zhuce">
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱账号/手机号">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label >
<input type="checkbox" > 记住密码
</label>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-block">登录 </button>
</form>
<div class="modal-footer">
<!--<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登录</button>-->
</div>
</div>
</div>
</div>
<!--登入结束-->
#####代码讲解：
modal-title 定义模态框的标题
使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
如果您仔细查看上面的代码，您会发现在 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
在模态框中需要注意两点：
第一是 .modal，用来把
的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby=“myModalLabel”，该属性引用模态框的标题。
属性 aria-hidden=“true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby=“myModalLabel”，该属性引用模态框的标题。
属性 aria-hidden=“true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
，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 用于打开模态窗口。
#####代码2（多个ID之间的切换）
<!-- 注册窗口 -->
<div id="register" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">注册</h1>
</div>
<div class="modal-body">
<form class="form-group" action="">
<div class="form-group">
<label for="">用户名</label>
<input class="form-control" type="text" placeholder="6-15位字母或数字">
</div>
<div class="form-group">
<label for="">密码</label>
<input class="form-control" type="password" placeholder="至少6位字母或数字">
</div>
<div class="form-group">
<label for="">再次输入密码</label>
<input class="form-control" type="password" placeholder="至少6位字母或数字">
</div>
<div class="form-group">
<label for="">邮箱</label>
<input class="form-control" type="email" placeholder="例如:[email protected]">
</div>
<div class="text-right">
<button class="btn btn-primary" type="submit">提交</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
</form>
</div>
</div>
</div>
</div>
<!-- 登录窗口 -->
<div id="login" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-title">
<h1 class="text-center">登录</h1>
</div>
<div class="modal-body">
<form class="form-group" action="">
<div class="form-group">
<label for="">用户名</label>
<input class="form-control" type="text" placeholder="">
</div>
<div class="form-group">
<label for="">密码</label>
<input class="form-control" type="password" placeholder="">
</div>
<div class="text-right">
<button class="btn btn-primary" type="submit">登录</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
<a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
</form>
</div>
</div>
</div>
</div>```
#####问题一：bootstrap多层模态框滚动条消失怎么办
监测html发现，当打开模态框时，会给 body 元素加一个 modal-open 的 class，而在 bootstrap.css 中，有这样一条 css 规则：
.modal-open .modal {overflow-x:hidden; overflow-y:auto}
因为有 overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body 元素的 css 规则 modal-open 会被移除掉，自然 overflow-y:auto 也就没有了，所以模态框的滚动条就消失了。
解决方案是在模态框的 div 元素上加一条 style="overflow: auto"，如下：
<div class="modal fade" ... style="overflow: auto">
这样，模态框的滚动就不依赖 body 元素的 css 规则 modal-open 了。
```<style type="text/css">
.modal-open{
overflow-y: scroll;
}
body{
padding-right:15px!important;
}
</style>```
加背景图片
```.modal-content{
background-image: url(assets/img/登入注册背景图片.jpg);
}```
错误代码加样式
```.error{
color:red;
}```