1.Boostrap模态框美化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<style>
#myModal{
left: 55%;
top: 50%;
transform: translate(-50%,-50%);
overflow: visible;
bottom: inherit;
right: inherit;
}
#modal-title{
margin-bottom: 0px;
background:#DCDCDC;
border-radius:0;
height:35px;
}
#modal-foot{
margin-bottom: 10px;
border-radius:0;
text-align: center;
}
</style>
<script>
$(function(){
$("button").click(function(){
$("#myModal").modal('show');
})
})
</script>
</head>
<body>
<button>打开</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 400px;">
<div class="panel" id="modal-title">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 style="margin-top: 5px;">编辑</h4>
</div>
<div class="modal-body" style="width: 400px;">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="">
</div>
</div>
</form>
</div>
<div class="panel" id="modal-foot">
<button class="btn btn-info" style="margin-right: 20px;">保存</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</body>
</html>
这个固定了宽度，位置大概是居中的，可以直接使用。若要改变大小，请自行调整（可以修改上面红色加粗的地方）。