第一步 ： 在jsp中引入jQuery.js
第二步：引入模态框的相关js：例如（
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
）这几个js就可以了。
第三部 ：在jsp</html>也就是在jsp的末尾添加一个<div> 例如：（
</html>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" 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">
<table class="table table-bordered" height="50" width="60" border="0"
cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><input type="hidden" id="id"></td>
</tr>
<tr>
<td align="center">用户<br>姓名:</td>
<td height="20"><input name="name" type="text" id="name" size="20" value="">
* </td>
</tr>
<tr>
<td align="center">用户<br>昵称:</td>
<td height="20"><input name="niceName" type="text" id="niceName" size="20" value="">
* </td>
</tr>
<tr>
<td align="center">用户年龄:</td>
<td><input name="age" type="text" id="age" size="20" value=""></td>
</tr>
<tr>
<td align="center">用户简介:</td>
<td>
<input type="text" id="credential" name="credential"value="" >
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
）里面的内容随便修改 一些特别的属性不要去修改。
第四部：一个触发事件，也就是点击弹出模态框。例如（<a class="button border-yellow button-little" data-toggle="modal" data-target="#myModal">添加用户</a>）
做完这四部 你会发现一个新的模态框就出现了。