使用jquery dialog

浏览数：37 / 时间：2015年06月09日

网页开发中，弹窗还是很有必要的。本人比较喜欢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);
                }
            }
        }
    }
};

View Code

栗子-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>

View Code

栗子-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 () {
           
        }
    });