Web开发中的弹出对话框控件介绍(1)
Web开发中，目前由于Jquery的大行其道，因此很多弹出对话框，都用到Jquery技术，反而原始的弹出对话框的方式较为少用了。不过基于JQuery的方式实现对话框窗口弹出，也有很多控件可以利用，由于工作需要及业余兴趣所至，我比较了近10种的对话框控件，其中发现有一些做得很好的，除了功能强大，而且也支持多种皮肤样式，甚至有些对话框的居中都考虑到了，细节决定体验，有些真的不错。
1、原始的弹出对话框实现（弹出窗口也可以）
我们知道，以前在没有应用其他javascript库（例如各种类型的Jquery库）的时候，一般是通过window.open或者window.showModalDialog来弹出非模态或者模态的对话框的，如下脚本所示。
- function OpenWin( sURL , sFeatures )
- {
- window.open( sURL , null , sFeatures , null)
- //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
- //window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
- //sName{_blank; _media; _parent; _search; _self; _top}
- //sFeatures{channelmode; directories; fullscreen; height; left; location; menubar; resizable; scrollbars; status; titlebar; toolbar; top; width}
- }
- function ShowWin( sURL , sFeatures )
- {
- if(sFeatures == null || sFeatures == ""){
- sFeatures = 'dialogHeight:300px;dialogWidth:850px;status:no;scroll:yes;resizable:yes;help:no;center:yes;';
- }
- var returnValue= window.showModalDialog( sURL , null , sFeatures)
- //window.showModalDialog("Sample.htm",null,"dialogHeight:591px;dialogWidth:650px;")
- //window.showModalDialog([sURL] [, vArguments] [, sFeatures])
- //sFeatures{dialogHeight; dialogLeft; dialogTop; dialogWidth; center; dialogHide; edge; help; resizable; scroll; status; unadorned}
- if(returnValue != undefined)
- {
- return returnValue;
- }
- else
- {
- return "";
- }
- }
这种是原始方式，好处坏处大家都明白，就不说了。
还有一种基于Jquery的原始弹出窗口方式，由于我一般使用的是easy-ui作为界面的基础组件，因此基于easy-ui的原始弹出窗口方式，只能是弹出内部的HTML层内容，对于弹出独立的页面这种方式支持不够好。
- <script type="text/javascript">
- function initDialog(divname) {
- var dlg = jQuery(divname).dialog({
- draggable: true,
- resizable: true,
- closed: true,
- show: 'Transfer',
- hide: 'Transfer',
- autoOpen: false,
- width: 500,
- height: 250,
- minHeight: 10,
- minwidth: 10
- });
- dlg.parent().appendTo(jQuery("form:first"));
- };
- function close(divname) {
- $(divname).dialog('close');
- }
- </script>
2、Popup的弹出式对话框
这个popup控件弹出的对话框，它好像把弹出的子页面放到了父窗口里面了，感觉是一体化的，所以操作父窗口的对话框也可以，非常方便。
这个popup控件，比较容易使用，不过不好的地方就是不兼容其他浏览器如Chrome等，其他浏览器显示层是错位的，不好看，而且样式也相对比较简单一点了。
但由于在弹出窗口中可以很好操作父窗口的脚本以及使用方便，在我以前的一些项目里面，用的还算比较多。
3、AsyncBox的弹出对话框
这个控件感觉做的很不错，而且提供了Chrome、QQBrowser、Ext、ZCMS四种不错的窗体皮肤，适应多种需要，通过修改它们的皮肤图片，还可以定义适合自己项目的样式皮肤，如我修改定义了一种黄色调的样式例子。
不过在使用过程中，发现这个控件，对有些脚本或者Jquery控件有冲突，具体原因未明，总之发现了和基于Jquery的ZTree运行不正常，还有一些Jquery组件使用也不正常，在我的Web权限管理系统中，本来想用这个作为弹出窗口显示一些设置信息的，发现zTree的Node选中值获取不了，也就相当于失效了，非常郁闷，弄了很久，没有找到具体原因。还有另外一个问题，就是这个控件的作者不知道什么原因，好像停止了对该控件的开发了，连它的官网也下架了。
不过对于弹出窗口的使用来说，该控件已经很不错了，提供了多种调用模块，而我一般倾向于弹出另外一个页面这种方式，当然它也支持弹出页面内部的层或者HTML代码等等方式。
