上一篇博客寫的是通過隱藏顯示進行div的替換，接下來需要在原有的div前添加一個div，進行表單的提交，需要將div放置在正中間，然后類似C#中的模態窗口，在進行完新彈出的div操作之后，才可以進行下一步操作
首先第一步，新建一個div窗口，代碼暫時不貼，主貼的最后貼上完整代碼
效果如圖所示：
可以看出此時的DIV只是將元素展示了出來，還沒有進行相應的優化，且不能對元素進行操作，主體DIV的位置也沒有固定，顯得很難看，下面對界面進行優化排版
首先要將div的位置放在界面的正中央，修改主體DIV的style，我在網上沒有找到一個簡單的方法，所說的設置margin:0px auto;並沒有實現效果
於是這里我用了一個最原始的方法，根據屏幕大小估算位置，如果后面我發現了有更好更快捷的方法我會及時更新的
完成這一步之后，需要調整界面上各個控件之間的位置排列，調整間距和邊框的距離等細節問題
網上查找的方法，基本上都是和屏幕居中放置一樣，設置一個line-height和text-align，我試了一下，都是針對文字的，於是還是老辦法，手動調整距離和控件為重的大小，原先的布局是用的easyui官網的例子，使用的是<table>，<tr>，<tb>標簽，我無法調整每個控件之間的距離，於是我改為了<form>和<P>標簽，在<head>中設置P的<Style>為<style> p{ margin:20px auto} </style>
在表單中設置<P>的align屬性為Middle（在Style中設置的無效。暫時還沒找到原因），效果如圖：
完成這些之后，新增的DIV在界面上無法操作，在主DIV的<Style>中設置z-index: 2 屬性即可
最后一個步驟，將DIV設置成類模態窗口
我最先的設想是新建兩個Div，一個Div覆蓋全屏幕，將背景設置為透明，再設置一個DIV放置表格，達到模態的效果，后來同事提醒我，Easyui有這個功能，網址如下：http://www.jeasyui.net/demo/586.html，在示例的Windows中有這個示范，選擇模態窗口即可，在運行的過程中，我發現原先我使用的通過visibility屬性沒有用了，默認的easyui-windows將div的屬性設置為了display：none，我在運行調試的時候窗口默認顯示而非原先設置的按鈕彈出，我去掉了一層Div之后有效果了，效果如圖所示：
我寫了有個簡單的示例，代碼如下，僅供參考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Window - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<div id="no2" style="position:absolute;top:-5px;;left:230px;height:96%;width:88%;margin:20px 0;z-index: 2" >
<table id="tableUser" class="easyui-datagrid" title="用戶管理表" style="width:96%;height:98%;overflow:hidden;"
data-options="
fitColumns:true,
striped:true,
rownumbers:true,
singleSelect:true,
toolbar:'#tb2',
pagination:true,
pageSize:10">
<thead>
<tr>
<th data-options="field:'szUserName',width:30,align:'center'">用戶名</th>
<th data-options="field:'szDepartment',width:40,align:'center'">部門</th>
<th data-options="field:'szPosition',width:40,align:'center'">職位</th>
<th data-options="field:'szJobNumber',width:50,align:'center'">工號</th>
<th data-options="field:'szNote',width:50,align:'center'">備注</th>
<th data-options="field:'NRole',width:50,align:'center'">權限</th>
</tr>
</thead>
</table>
<div id="tb2" style="height:auto">
<a id="add" href="javascript:void(0)"class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="$('#w').window('open')">增加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="$('#w').window('open')">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="accept()">刪除</a>
</div>
</div>
<div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true" style="width:500px;height:490px;padding:10px 60px 20px 60px">
<form id="User" class="easyui-form" method="post" data-options="novalidate:true">
<p class="Name" align="middle">
 <label>用戶名：</label>  
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
<p class="Psw" align="middle">
<label>輸入密碼：</label>
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
<p class="Ypsw" align="middle">
<label>確認密碼：</label>
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
<p class="Department" align="middle">
   <label>部門： </label>   
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
<p class="Work" align="middle">
   <label>職位：</label>   
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
<p class="Number" align="middle">
   <label>工號：</label>   
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
<p class="permissions" style="position: relative; margin-left:91px">
   <label>權限：</label>   
<select class="easyui-combobox" name="language"><option value="User">普通用戶</option><option value="Admin">管理員</option><option value="Master">超級管理員</option></select>
</p>
<p class="PS" align="middle">
   <label>備注：</label>   
<input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
</p>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>   
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>   
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">取消</a>
</div>
</div>
</body>
</html>
PS 值得一提的是，使用了Easyui-Window樣式之后，不能對原窗體設置定位，也就是說我們設置的居中定位不能使用了，好在原先設定的樣式可以拖動且位置也是居中設計的，至於為什么在DIV中設置Position失效，暫時還沒有找到原因