1.源码
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/Popper.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<html>
<head>
<title>添加</title>
<style>
table{
text-align: center;
}
thead{
font-size: large;
font-weight: bold ;
}
body{
padding-top: 100px;
}
.form-control{
width: 300px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Easy Employee Manage</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/go/home.do">Home</a></li>
<li><a href="#">Login</a></li>
<li class="active"><a href="/go/add.do">Add</a></li>
<li><a href="">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<form role="form" class="form-info">
<div class="form-group col-md-4 col-md-offset-4" >
<label>名称:</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group col-md-4 col-md-offset-4">
<label>类型:</label>
<select class="form-control" style="width: 120px">
<option>模糊查询</option>
<c:forEach items="${types}" var="type">
<option>${type.name}</option>
</c:forEach>
</select>
</div>
<div class="form-group col-md-4 col-md-offset-4">
<label>评分:</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group col-md-4 col-md-offset-4">
<label>日期:</label>
<input type="date" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group col-md-3 col-md-offset-5">
<input type="button" value="提交" id="test" class="form-control" style="width: 100px">
</div>
</form>
<div class="modal" id="my-modal-alert">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="modal-title">模态框</h4><span id="num"></span>
</div>
<!--/*modal-header*/-->
<div class="modal-body">
<div id="modal_message"><span id="message">modal_message</span></div>
</div>
<!--/*modal-body*/-->
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
<!--/*modal-body*/-->
</div>
<!--/*modal-footer*/-->
</div>
<!--/*modal-dialog*/-->
</div>
<!--/*modal-content*/-->
</div>
</div>
<script type="text/javascript">
$(function() {
$("#test").click(function(){
$("#my-modal-alert").modal("toggle");
$(".modal-backdrop").remove();//删除class值为modal-backdrop的标签，可去除阴影
//设置提示信息
$("#message").text("dsadsadsa");
});
});
</script>
</body>
</html>
2.效果
