JQ插件之动态框

   不要在一个模态框上重叠另外一个模态框，要想同时支持多个模态框，需要自己写额外的代码来实现

   一定要将模态框的HTML代码放在文档的最高层内（尽量作为body标签的直接子元素），以避免其他组件影响模态框的展现和功能
<!-- fade 进入的透明度的一个变化 -->
<!-- data-backdrop="static" 点击周围的遮罩不起作用 必须点击关闭按钮 -->
<div id="mymodal" class="modal fade bs-example-modal-sm" data-backdrop="static">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
            <!-- 模态框的标题 -->
                <div class="modal-header">
                <!-- 关闭按钮 -->
                <!-- data-dismiss="modal" 必须要和data-toggle="modal"对应 data-是boostrap的一等api -->
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">登录百度账号</h4>
            </div>
            <!-- 是模态框的主体的内容 -->
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="手机/邮箱/登录名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="密码">
                </div>
                <div class="form-group">
                    <input type="checkbox" id="a"> <label for="a">下次自动登录</label>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" style="width:100%;">登录</button>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-primary login"  data-toggle="modal" data-target="#mymodal">登录</button>