BootStrap模态框

模态框示例图：

比如点击下图操作里的修改按钮，弹出上面的模态框：

<inputtype="button" id="updateBtn" value="修改"  class="btn btn-primary"

data-toggle="modal"data-target="#updateUser"/> //这里的data-target与下面模态框div的id对应

 <!- 模态框（Modal） -->
    <div class="modal fade" id="updateUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog" >
            <div class="modal-content" style="background:#E6E6FA;width:350px;height:380px;margin:auto;">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
            </div>
            <div class="modal-body" >
            <div class="updateUserModal">
              <ul >                    
                <li >
                <label style="position:relative;left:15px;" >用户名</label>
                <input type="text" id="userCode" class="input" readOnly="true"  style="position:relative;left:22px;"/>
                </li>
                <li>
                <span >*</span><label style="position:relative;left:15px;">角色</label>
                 <input type="text" id="roleID" class="input "  style="position:relative;left:28px;"/>
                </li>
                <li ><label style="position:relative;left:1px;" >联系方式</label>
                 <input type="text" id="phonenumber" class="input " style="position:relative;left:7px;" />
                </li>
              </ul>
              </div>
                 <div id="updateButton">
                  <input type="button" id="updateUserBtn" value="修改"  style='font-size:20px' class="btn btn-add" />
                </div>
               </div>
             </div><!-- /.modal-content -->
         </div><!-- /.modal -->
       </div>