Web开发中的弹出对话框控件介绍(1)(2)

4、artDialog弹出对话框

这个artDialog弹出对话框组件，是我觉得相当好的一款了，除了支持多种浏览器，而且提供的界面效果更多，目前的版本是V4.1.6，好像还有一个V5.0的Beta版本(https://github.com/aui/artDialog)，但是V5.0的就调整了不支持通过art.dialog.open方式弹出独立Web页面的方式了，要实现弹出独立页面，需要使用Iframe的代码，效果就差了一些，所以我倾向于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函数

function ShowArtDlg(title, url, width, height, lock)   
{  
    if (width == null || width == "") {  
        width = '90%';  
    }  
    if (!width.indexOf('px') && !width.indexOf('%')) {  
        width = width + 'px';  
    }  
    if (width.indexOf('px') < 0 && width.indexOf('%') < 0) {  
        width = width + 'px';  
    }  
 
    if (height == null || height == "") {  
        height = '90%' 
    }  
    if (height.indexOf('px') < 0 && height.indexOf('%') < 0) {  
        height = height + 'px';  
    }  
 
    if (lock == null || lock == "") {  
        lock = false;  
    }  
    art.dialog.open(url, { height: height, width: width, title: title, lock: lock }, false); //打开子窗体  
} 

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

<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、还有一些弹出窗口控件，还支持窗口的最大化操作，这个功能还是不错的。