关于模态框的引入

第一步 ： 在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">&times;</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>）

做完这四部 你会发现一个新的模态框就出现了。