Web開發中的彈出對話框控件介紹

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代碼等等方式。

 

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、還有一些彈出窗口控件，還支持窗口的最大化操作，這個功能還是不錯的。