使用jquery dialog

網頁開發中，彈窗還是很有必要的。本人比較喜歡jquery ui的dialog。

但是jquery dialog中也有一些略顯不方便的，如：沒有z-index的參數設置，腳部的按鈕樣式沒辦法自定義……

我自己簡單地寫了個使用jquery dialog封裝函數，有興趣的朋友看看。

JavaScript（看起來有點多，但放到vs里，ctrl+m+o，還是比較清楚明了的）：

$.ivanjs = $.ivanjs || {};
$.ivanjs.com = $.ivanjs.com || {};

$.ivanjs.com = {
    //other function

    //彈窗
    showWin: function (content, options) {
        var contentDiv = content;
        //檢查傳遞過來的參數類型是否為Jquery對象
        if (!(content instanceof $)) {
            //如果是字符串，則構造一個Jquery對象
            if (typeof (content) == "string") {
                contentDiv = $("<div>" + content + "</div>");
            } else {
                alert("彈窗內容參數無效，必須為jquery元素對象或者字符串");
                return null;
            }
        }

        //默認設置
        var _options = {
            autoOpen: true,
            modal: true,
            zIndex: null,
            full: false,//是否全屏
            destroyEnable: true,
            afterOpen: function () {
                //打開之后的回調
            }
        };

        //避免為空對象
        options = options || {};
        //把按鈕對象轉換為jquery ui能識別的格式參數
        var customBtns = options.buttons || [];
        options.buttons = {};
        for (var i = 0; i < customBtns.length; i++) {
            var btnObj = customBtns[i];
            options.buttons[btnObj.text] = btnObj.handler || function () {};
        }

        //調用者的設置優先
        _options = $.extend({}, _options, options);

        //關閉后的回調
        var closeCallback = _options.close;
        var isCodeElement = $("body").find(contentDiv).length == 0;
        _options.close = function () {
            if (closeCallback) {
                closeCallback();
            }
            //如果是用代碼構造的jquery元素，則銷毀。避免下次構造時頁面中反復存在
            if (_options.autoOpen && _options.destroyEnable && isCodeElement) {
                setTimeout(function () {
                    contentDiv.remove();
                }, 250);
            }
        };

        //初始化之后立即打開的
        if (_options.autoOpen && !contentDiv.length) {
            alert("彈窗內容要顯示的jquery元素不存在，selector：" + contentDiv.selector);
            return null;
        }

        var dialogObj = contentDiv.dialog(_options);
        
        updateDialogStyle();

        if (_options.autoOpen && _options.afterOpen) {
            _options.afterOpen();
        }

        //如果是初始化之后，再手動打開的，則添加一個打開的“開關”，供外部使用
        dialogObj.open = function () {
            if (!dialogObj.length) {
                alert("彈窗內容要顯示的jquery元素不存在，selector：" + dialogObj.selector);
            }

            dialogObj.dialog("open");

            updateDialogStyle();

            if (_options.afterOpen) {
                _options.afterOpen();
            }
        };

        return dialogObj;

        //應用自定義的樣式，更新彈窗樣式
        function updateDialogStyle() {
            var uiDialog = contentDiv.parent(".ui-dialog");

            //z-index
            if (_options.zIndex) {
                uiDialog.css({ "z-index": _options.zIndex });
            }
            
            //按鈕樣式
            if (customBtns.length) {
                for (var j = 0; j < customBtns.length; j++) {
                    var cbtn = customBtns[j];
                    var btnArr = uiDialog.find("button:contains('" + cbtn.text + "')");
                    var btn = btnArr;
                    if (btnArr.length > 1) {
                        for (var k = 0; k < btnArr.length; k++) {
                            btn = $(btnArr[k]);
                            var res = $(btn.children()).filter(function (index) {
                                return $(this).text() == cbtn.text;
                            });
                            if (res.length>0) {
                                break;
                            }
                        }
                    } 
                    
                    //覆蓋全部class樣式
                    if (cbtn.className) {
                        btn.attr("class", cbtn.className);
                    }
                    //增加
                    if (cbtn.addClass) {
                        btn.addClass(cbtn.addClass);
                    }
                    //移除
                    if (cbtn.removeClass) {
                        btn.removeClass(cbtn.removeClass);
                    }
                    //內嵌樣式
                    if (cbtn.style) {
                        for (var styleName in cbtn.style) {
                            btn.css(styleName, cbtn.style[styleName]);
                        }
                    }
                    //圖標
                    if (cbtn.icon) {
                        btn.prepend($("<span>" + cbtn.icon + "</span>"));
                    }
                    //ko綁定
                    if (cbtn["data-bind"]) {
                        btn.attr("data-bind", cbtn["data-bind"]);
                    }
                    
                }
                //只需更新一次，然后重置按鈕參數變量，避免打開之后反復更新按鈕樣式
                customBtns = [];
            }

            //寬和高
            if (_options.full) {
                setFullScreen();

                $(window).resize(function () {
                    setFullScreen();
                }).resize();

                //全屏樣式
                function setFullScreen() {
                    var uiAllWidth = $(window).width() - 20,
                        uiAllHeight = $(window).height() - 30;

                    uiDialog.css("width", uiAllWidth);
                    uiDialog.css("height", uiAllHeight);
                    uiDialog.css("left", "5px");
                    uiDialog.css("top", "5px");

                    var uiFooter = uiDialog.find(".ui-dialog-buttonpane"),
                        uiHeader = uiDialog.find(".ui-dialog-titlebar"),
                        uiFooterH = uiFooter.height(),
                        uiHeaderH = uiHeader.height();

                    console.log("高：全部" + uiAllHeight + ";頭" + uiHeaderH + ";腳" + uiFooterH);

                    contentDiv.css("height", uiAllHeight - uiHeaderH - uiFooterH - 50);
                }
            }
            else {
                var uiWidth = parseInt(uiDialog.css("width")),
                    winWidth = $(window).width();

                if (winWidth <= uiWidth) {
                    uiDialog.css("width", winWidth - 10);
                } else if (_options.width) {
                    uiDialog.css("width", _options.width);
                }
            }
        }
    }
};

 

栗子-html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   
</head>
    <body>
       
       
        <div>
            <input type="button" id="openFormDialog_body" value="打開子表單" />
        </div>
        
        <div id="dialogform" title="Create new user">
            <input type="text"  value=" " />
        </div>

    </body>
</html>

 

栗子-js：

//測試1：自動彈出
    $.ivanjs.com.showWin("yes");
    
    $.ivanjs.com.attachConsole();

    //測試2：手動彈窗
    var bodyDialog = $.ivanjs.com.showWin($("#dialogform"), {
        autoOpen: false,
        height: 300,
        width: 550,
        full: false,
        zIndex:999,
        modal: true,
        buttons: [
            { text: "確認", className: "yourClass", style: { color: "green" },icon:"<fa>123</fa>", "data-bind":"click:myClick", handler: function () { } },
            {text:"確認取消"}
        ],
        close: function () {
           
        }
    });

 

呃，如果要運行的話，當然要在示例的html里引入示例js……怎么引用JS，這個就不好說了吧……

另外，console.log，ie9及以下的瀏覽器不支持哦，以上代碼里的console.log只是為了方便調試，可以注釋掉的。