Web开发中的弹出对话框控件介绍

最新推荐文章于 2022-12-14 10:59:09 发布

menicyta

最新推荐文章于 2022-12-14 10:59:09 发布

阅读量879

点赞数

分类专栏： ASP.NET

ASP.NET 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

【IT168 技术】Web开发中，目前由于Jquery的大行其道，因此很多弹出对话框，都用到Jquery技术，反而原始的弹出对话框的方式较为少用了。不过基于JQuery的方式实现对话框窗口弹出，也有很多控件可以利用，由于工作需要及业余兴趣所至，我比较了近10种的对话框控件，其中发现有一些做得很好的，除了功能强大，而且也支持多种皮肤样式，甚至有些对话框的居中都考虑到了，细节决定体验，有些真的不错。

　　1、原始的弹出对话框实现(弹出窗口也可以)

　　我们知道，以前在没有应用其他javascript库(例如各种类型的Jquery库)的时候，一般是通过window.open或者window.showModalDialog来弹出非模态或者模态的对话框的，如下脚本所示。

　　这种是原始方式，好处坏处大家都明白，就不说了。

　　还有一种基于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控件弹出的对话框，它好像把弹出的子页面放到了父窗口里面了，感觉是一体化的，所以操作父窗口的对话框也可以，非常方便。

　　这个popup控件，比较容易使用，不过不好的地方就是不兼容其他浏览器如Chrome等，其他浏览器显示层是错位的，不好看，而且样式也相对比较简单一点了。

　　但由于在弹出窗口中可以很好操作父窗口的脚本以及使用方便，在我以前的一些项目里面，用的还算比较多。

　　3、AsyncBox的弹出对话框

　　这个控件感觉做的很不错，而且提供了Chrome、QQBrowser、Ext、ZCMS四种不错的窗体皮肤，适应多种需要，通过修改它们的皮肤图片，还可以定义适合自己项目的样式皮肤，如我修改定义了一种黄色调的样式例子。

　　不过在使用过程中，发现这个控件，对有些脚本或者Jquery控件有冲突，具体原因未明，总之发现了和基于Jquery的ZTree运行不正常，还有一些Jquery组件使用也不正常，在我的Web权限管理系统中，本来想用这个作为弹出窗口显示一些设置信息的，发现zTree的Node选中值获取不了，也就相当于失效了，非常郁闷，弄了很久，没有找到具体原因。还有另外一个问题，就是这个控件的作者不知道什么原因，好像停止了对该控件的开发了，连它的官网也下架了。

　　不过对于弹出窗口的使用来说，该控件已经很不错了，提供了多种调用模块，而我一般倾向于弹出另外一个页面这种方式，当然它也支持弹出页面内部的层或者HTML代码等等方式。

4、artDialog弹出对话框

　　这个artDialog弹出对话框组件，是我觉得相当好的一款了，除了支持多种浏览器，而且提供的界面效果更多，目前的版本是V4.1.6。

　　该控件支持自动计算居中位置，我们只需要指定对话框的大小即可，当然它很好支持页面内的层内容的弹出显示，不过我更关注的是独立页面的弹出对话框显示，我在具体的Web权限管理系统中应用的效果如下所示(结合了ZTree控件，运行正常)。

　　这个控件提供了很多参数以及方法，对实现调用非常强大。

< script src = " http://www.cnblogs.com/JQueryTools/artDialog/artDialog.source.js?skin=blue " type = " text/javascript " ></ script >
< script src = " http://www.cnblogs.com/JQueryTools/artDialog/plugins/iframeTools.source.js " type = " text/javascript " ></ script >

　　首先封装一个通用的Javascript函数。

　　页面里面调用的代码如下所示。

< tr align = " right " >
   < td >
       < a href = " # " class = " easyui-linkbutton " iconcls = " icon-edit " id = " btnAddUser " onclick = " ShowArtDlg('编辑-包含用户', 'EditTree.aspx?type=user&ouid=' + $('#txtID').val(), '360px', '500px') " runat = " server " > 编辑 </ a >& nbsp; & nbsp;
       < a href = " # " class = " easyui-linkbutton " iconcls = " icon-remove " id = " btnDeleteUser " onclick = " deleteUser() " runat = " server " > 移除 </ a >
   </ td >
</ tr >

　　如果你用5.0+的ArtDialog，调整了不支持通过art.dialog.open方式弹出独立Web页面的方式，但还是可以通过以下的方法去弹出独立页面。

art.dialog({title : " 选择*** " ,
            cancel : true ,
            width : 600 ,
            padding : ' 5px',
            content : ' <iframe src="test.aspx" id="test" name="test" height="400" width="600" frameborder="0"></iframe>',
            ok : function (){
                ...
            }
        });

　　5、还有一些弹出窗口控件，还支持窗口的最大化操作，这个功能还是不错的