首先需要准备bootstrap.css，bootstrap .js jquery
我这里有写好的下载地址如下：
https://pan.baidu.com/s/1miMahXe 秘钥：tgts
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webrx-title</title>
<meta name="description" content="简介">
<meta name="keywords" content="关键字">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href=‘http://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘ />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
<!-- Custom Styles-->
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn btn-info" data-toggle="modal" data-target="#form">表单</div>
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加</h4>
</div>
<div class="modal-body">
<input placeholder="名称" id="first_name" type="text" class="inputIndex"><br/>
<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked">
<label for="filled-in-box">隐藏网络不被发现</label><br/>
<select id="mySelect" style="display:block;">
<option>信号强度</option>
</select><br/>
<label>请选择文件</label><br/>
<input type="file" name=""/>
</div>
<div class="col-lg-12">
<button type="button" class="btn btn-primary pull-left" onClick="aa()">提交</button>
<!-- <button type="button" class="btn btn-default pull-right">重置</button> -->
</div>
<br/><br/>
<div class="modal-footer" style="display:none">
</div>
</div>
</div>
</div>
<div class="modal fade" id="processing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-header" style="display:none"> </div><br/>
<div>
网络正在连接中，请稍等...
</div><br/><span class="btn" onClick="bb()">关闭</span>
<div class="modal-footer" style="display:none">
</div>
</div>
</div>
</div>
<script>
function aa(){
$("#form").modal("hide");
$("#processing").modal("show");
}
function bb(){
$("#processing").modal("hide");
}
</script>
</body>
</html>