效果图

通话图

互动图

如上图所示，这基本上就是JQueryDialog完整的逻辑流程。1.当用户在模态窗口中单击提交按钮时，JQueryDialog。调用Ok()函数，对应用户提交的事件。2.有了OO的概念，JQueryDialog。Ok()实际上是一个虚函数，它的逻辑封装在子窗口ContentWindow中。Ok()，是我从FCKEditor借来的。代码如下所示：JS代码复制如下： var jQuery Dialog={//Summary Submission/Summary///备注/备注ok3360 function(){ var FRM=$(' # JD _ iframe ')；if(frm[0]. content window . ok()){ JqueryDialog。close()；} else{ frm[0]。焦点()；} } };因此，从Iframe到Dialog的每个子页面都必须定义父窗口可以调用的函数Ok，并返回true或false来通知父窗口Dialog是否关闭。3.通常ContentWindow包含服务器的处理逻辑，因此需要通过POST与服务器进行交互。因为ContentWindow本身不包含“提交”按钮，所以如果要开机自检，必须在ContentWindow中写入submit()。Ok()。4.最后，服务器逻辑执行完成，控制权需要返回给Dialog。所以我封装了JQueryDialog。SubmitCompleted()，它包含Dialog执行最终逻辑处理的三个参数：是否弹出消息及其内容、是否关闭Dialog以及是否刷新父窗口。该功能还得益于FCKEditor，如下图：JS代码复制代码如下： var jquery dialog={//汇总提交完成/summary ///param name='alertMsg '弹出提示。如果该值为空，/param///param name=' isclosedialog '是否关闭对话框/param///param name=' isfreshpage '是否刷新页面(关闭对话框为真时有效)/param submit completed : function(alertMsg，isCloseDialog，isfreshpage){ if($)。装饰(alertMsg)。长度0){ alert(alertMsg)；} if(isCloseDialog){ JqueryDialog。close()；if(IsRefreshPage){ window . location . href=window . location . href；} } } };5.结果会做出响应并呈现给用户。开发日志JS的模态窗口在网上数量很大。参考了一些之后，我最终决定把它纳入我众多“原创项目”中的一个。毕竟，在WEB开发中，窗口仍然被非常频繁地使用。从版本发布日志可以看出，这个东西已经修修补补了一段时间了，现在基本上是一个初始版本，但我会不断完善。在这个过程中，我有机会参考和学习JQuery、Fckeditor等大型JS项目的框架，收获颇丰。同时我也再次经历了JS多浏览器兼容调试的痛苦，但为什么不呢？玩得开心。谈项目的实现：首先，基于浮动DIV。然后是iframe子页面，我觉得用户和开发者使用iframe最方便。模态窗口的内容就是子页面的内容，模态窗口的切换就是子页面的切换。在确定了框架结构之后，有一些处理细节，比如子页面的事件之间的关系，模态窗口的关闭，这些我都得到了FCKEditor很大的帮助。参考它的实现，您可以在DEMO中查看详细的代码。为了多浏览器的兼容性，一些常见的DOM方法被封装。增加了一些自定义配置，如边框颜色和背景颜色。同时考虑到方便易用，使用CSS来达到效果，项目中不使用图片。好的，前面提到了，这是一个比较基础的版本，以后我会继续完善。欢迎大家使用，并提出宝贵建议。(2009年6月1日，吴剑)。虽然项目的开放项都交了，但是我开始对JQuery有了好印象，放下了，所以我决定正式把这个项目改名为JQueryDialog。这次更新，代码完全基于JQuery框架，应用了命名空间，让JS看起来有点OO。同时修改客户端的ID，增加jd_ prefix避免冲突，修改拖拽的核心函数，支持多浏览器。

最后，在DEMO中添加了一个客户机和服务器交互的例子。欢迎下载使用。(2009年11月5日，吴剑)。移动事件丢失，可以尝试DEMO。修改后的dragondrop现在完全流畅了，我还隔离了一个dragondrop类，专门用于拖拽。我不得不再次感谢FCKEditor的源代码，并吸收了它的很多精华。前几天看完新闻，FCKEditor重构代码，推出MAC风格的CKEditor，我一直在研究FCK。相信我会在短时间内写一篇关于FCKEditor源代码分析的文章。好的，2.0.1版本主要优化核心的拖拽，修复Dialog位置、Mouse样式等bug，增加自定义样式的配置项，优化JQuery的缓存。(2009年12月13日，吴剑)。(2010年1月18日开放吴)-。(2010年2月3日，吴剑)版本发布JS代码/* * * * * * * * * * * * * * * * * * * * *。2009-07-05:1 . 0 . 2版更新了一些明显的bug，完全支持IE系列浏览器。2009-08-15:1 . 0 . 3版本，封装标准DOM，兼容多种浏览器，风格美化，增加阴影效果。2009-11-05:2 . 0 . 0版，基于JQuery全新的封装，应用了JS的命名空间，避免了客户端id的冲突。该项目正式更名为JQuery Dialog，优化了拖拽的核心实现，完全支持跨浏览器。2009年12月14日：2.0.1版，优化核心拖拽算法，分离DragAndDrop类。修正了鼠标拖动过快，对话框暂停的BUG。修正了对话框宽度或高度大于页面时定位的BUG。修正了鼠标样式和拖放控制区域不准确的BUG。增加了配置项和优化的JQuery缓存。2010-01-18:版本2.0.2，JQuery升级到1.4。2010-02-03:2 . 0 . 3版对Open()方法增加了内部扩展，修复了IE6下部显示的BUG。* * * * *