如标题,分享测试的时候用css写的弹框
页面内容居中:
弹框:
引用外链css,js
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
tabindex="-1" aria-hidden="true" 实现隐藏
<h3>bootstrap 简单弹框</h3> <button data-toggle="modal" data-target="#alterPasswordDiv" id="alterPassword">修改</button></a> <!-- 修改密码弹框 --> <div class="modal inmodal" id="alterPasswordDiv" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" style="width: 420px"> <div class="modal-content animated fadeIn"> <div class="modal-header" style="padding: 8px"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <p class="modal-title" style="font-size: 16px;">修改密码</p> </div> <div class="modal-body"> <form class="form-horizontal m-t" id="form_alertText"> <div class="form-group"> <label class="col-sm-3 control-label" style="width:24%">原密码:</label> <div class="col-sm-8" style="width:68%"> <input id="oldPassword" name="password" type="password" maxlength="30" placeholder="请输入原密码" class="form-control"/> </div> </div> <br> <div class="form-group"> <label class="col-sm-3 control-label" style="width:24%">新密码:</label> <div class="col-sm-8" style="width:68%"> <input id="newPassword" name="password" type="password" maxlength="30" placeholder="请输入新密码" class="form-control"/> </div> </div> </form> </div> <div class="modal-footer" style="padding: 8px"> <button type="button" class="btn btn-primary btn_saveJobs">保存</button> <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button> </div> </div> </div> </div>