模态框的简单使用

166 阅读1分钟
<!-- bs-example-modal-sm   缩小  -->
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal">登录</button>
<!-- 模态框(Modal) -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <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">登录百度账号</h4>
            </div>
            <div class="modal-body"><input type="text" class="form-control" placeholder="请输入用户名"> </div>
            <div class="modal-body"><input type="text" class="form-control" placeholder="密码"> </div>
            <div class="modal-body"><input type="checkbox" placeholder="密码">下次自动登录 </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary form-control" data-dismiss="modal">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>