上一篇博客写的是通过隐藏显示进行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之后有效果了，效果如图所示：

我写了有个简单的示例，代码如下，仅供参考：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Modal Window - jQuery EasyUI Demo</title>
  6.     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8.     <link rel="stylesheet" type="text/css" href="../demo.css">
  9.     <script type="text/javascript" src="../../jquery.min.js"></script>
  10.     <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13.  
  14.     <div id="no2" style="position:absolute;top:-5px;;left:230px;height:96%;width:88%;margin:20px 0;z-index: 2" >
  15.     <table id="tableUser" class="easyui-datagrid" title="用户管理表" style="width:96%;height:98%;overflow:hidden;"
  16.            data-options="
  17.               fitColumns:true,
  18.               striped:true,
  19.               rownumbers:true,
  20.               singleSelect:true,
  21.               toolbar:'#tb2',
  22.               pagination:true,
  23.                pageSize:10">
  24.         <thead>
  25.         <tr>
  26.             <th data-options="field:'szUserName',width:30,align:'center'">用户名</th>
  27.             <th data-options="field:'szDepartment',width:40,align:'center'">部门</th>
  28.             <th data-options="field:'szPosition',width:40,align:'center'">职位</th>
  29.             <th data-options="field:'szJobNumber',width:50,align:'center'">工号</th>
  30.             <th data-options="field:'szNote',width:50,align:'center'">备注</th>
  31.             <th data-options="field:'NRole',width:50,align:'center'">权限</th>
  32.         </tr>
  33.         </thead>
  34.     </table>
  35.     <div id="tb2" style="height:auto">
  36.         <a id="add" href="javascript:void(0)"class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="$('#w').window('open')">增加</a>
  37.         <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="$('#w').window('open')">修改</a>
  38.         <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="accept()">删除</a>
  39.     </div>
  40. </div>
  41.  
  42.     <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">
  43.         <form id="User" class="easyui-form" method="post" data-options="novalidate:true">
  44.             <p class="Name" align="middle">
  45.                 &nbsp<label>用户名：</label>&nbsp&nbsp
  46.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  47.             </p>
  48.  
  49.             <p class="Psw" align="middle">
  50.                 <label>输入密码：</label>
  51.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  52.             </p>
  53.  
  54.             <p class="Ypsw" align="middle">
  55.                 <label>确认密码：</label>
  56.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  57.             </p>
  58.  
  59.             <p class="Department" align="middle">
  60.                 &nbsp&nbsp&nbsp<label>部门： </label>&nbsp&nbsp&nbsp
  61.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  62.             </p>
  63.  
  64.             <p class="Work" align="middle">
  65.                 &nbsp&nbsp&nbsp<label>职位：</label>&nbsp&nbsp&nbsp
  66.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  67.             </p>
  68.  
  69.             <p class="Number" align="middle">
  70.                 &nbsp&nbsp&nbsp<label>工号：</label>&nbsp&nbsp&nbsp
  71.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  72.             </p>
  73.  
  74.             <p class="permissions" style="position: relative; margin-left:91px">
  75.                 &nbsp&nbsp&nbsp<label>权限：</label>&nbsp&nbsp&nbsp
  76.                 <select class="easyui-combobox" name="language"><option value="User">普通用户</option><option value="Admin">管理员</option><option value="Master">超级管理员</option></select>
  77.             </p>
  78.  
  79.             <p class="PS" align="middle">
  80.                 &nbsp&nbsp&nbsp<label>备注：</label>&nbsp&nbsp&nbsp
  81.                 <input class="easyui-textbox" type="text" name="name" data-options="required:true"></input>
  82.             </p>
  83.  
  84.         </form>
  85.         <div style="text-align:center;padding:5px">
  86.             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>&nbsp&nbsp&nbsp
  87.             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清空</a>&nbsp&nbsp&nbsp
  88.             <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">取消</a>
  89.         </div>
  90.     </div>
  91.  
  92. </body>
  93. </html>

PS 值得一提的是，使用了Easyui-Window样式之后，不能对原窗体设置定位，也就是说我们设置的居中定位不能使用了，好在原先设定的样式可以拖动且位置也是居中设计的，至于为什么在DIV中设置Position失效，暂时还没有找到原因

  1.  

JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间的更多相关文章

  1. JaveWeb 公司项目（1）----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  2. JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

    效果图 调用示意图   交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...

  3. JaveWeb 公司项目（7）----- 通过JS动态生成DIV

    Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...

  4. JaveWeb 公司项目（6）----- 通过ToolTip给控件添加动态注释

    现在公司的项目进展到了视屏这一块,关于海康网页端的构建我会另外写一篇博客来详细讲解,这一篇的博文主要讲的是我刚刚遇到的一个小问题 连接上了视屏之后,将控制按钮换成图标,方位按钮比较好理解,调焦调距的按 ...

  5. JaveWeb 公司项目（3）----- 通过Thrift端口获取数据库数据

    前面两篇博客的内容主要是界面搭建的过程,随着界面搭建工作的完成,网页端需要加入数据,原先的B/S架构中C#通过Thrift接口获取数据,所以在网页端也沿用这个设计 首先,新建一个Maven下的Web项 ...

  6. c#: 以模态窗口显示于其它进程窗体之前

    产品之工具箱,需要工具以模态窗体,显示于主界面之上.记下代码点,以做备忘. 1.IWin32Window internal class Win32Window : IWin32Window { pub ...

  7. JaveWeb 公司项目（5）----- Java获取当前时间的年月日以及同Thrift格式的转化

    随着项目进度的逐步完成,数据传输和界面基本上已经搭建完成,下面就是一些细节部分的修改 今天博文的主要内容说的是获取当前的时间和同Thrift类型的转化 和C#类似,java也有一个时间类Date,加载 ...

  8. JaveWeb 公司项目（4）----- Easyui的表单验证

    前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所 ...

  9. WPF 显示模态窗口和窗体

    <WPF编程宝典——使用C# 2008和.NET 3.5(第2版)>第25章与Windows窗体的互操作,本章将介绍用于集成Windows窗体和WPF内容的不同策略.还将分析如何在应用程序 ...

随机推荐

  1. bzoj4444 国旗计划

    题目链接 倍增,预处理出每个点往后$2^i$个应该选哪个人 我用的treap就是快 #include<algorithm> #include<iostream> #includ ...

  2. <转>jmeter（三）SOAP/XML-RPC Request

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  3. double类型的数值计算

    package jiajian; public class jiajian { public static void main(String[] args) { System.out.println( ...

  4. linux学习---ps、kill

    一.ps       查看进程 ps 为我们提供了进程的一次性的查看,它所提供的查看结果并不动态连续的:如果想对进程时间监控,应该用 top 工具 linux上进程有5种状态: 1. 运行(正在运行或 ...

  5. GoldenGate Logdump基本使用

    Logdump是GoldenGate复制软件中附带的一个工具软件,在OGG的目录下可以找到.这个工具主要用于分析OGG生成的队列文件,查找记录.统计队列文件中的数据等. 在OGG安装目录下执行logd ...

  6. hiho一下 第145周

    题目1 : 智力竞赛 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi.小Ho还有被小Hi强拉来的小Z,准备组队参加一个智力竞赛.竞赛采用过关制,共计N个关卡.在第i ...

  7. runltp&ltp-pan

  8. Golang错误处理函数defer、panic、recover、errors.New介绍

    在默认情况下,当发生错误(panic)后,程序就会终止运行 如果发生错误后,可以捕获错误,并通知管理人员(邮件或者短信),程序还可以继续运行,这当然无可厚非 errors.New("错误信息 ...

  9. 【Python019--函数与过程】

    一.函数与过程 1.Python只有函数没有过程 >>> def hello():    print('Hello  fishC!')>>> temp = hell ...

  10. python --- 05 字典 集合

    一.字典 可变数据类型 {key:value}形式   查找效率高   key值必须是不可变的数据类型 1.增删改查 1).增    dic["新key"] = "新va ...