前端：bootstrap ——利用css写个简单弹框

如标题，分享测试的时候用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>