JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间
上一篇博客写的是通过隐藏显示进行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失效，暂时还没有找到原因
