看了jqueryui dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的dialoghelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对了，后续再封装成什么样都不过是形式而已，希望这个思路能给大家点启迪，同时欢迎大家开拓思维，提出更好的改进意见。
复制代码 代码如下:
//require scrollhelper.js
function dialoghelper() {
    var _this = this;
    var doc = window.document;
    _this.maskdiv = null;
    _this.contentdiv = null;
    var options = {
        opacity: 0.4
    };
    this.popup = function (contentdiv, optionarg) {
        if (optionarg) {
            for (var prop in optionarg) {
                options[prop] = optionarg[prop];
            }
        }
        _this.contentdiv = contentdiv || _this.contentdiv;
        _this.maskdiv = $('');
        _this.maskdiv.addclass('maskdiv');
        _this.maskdiv.css({
            'filter': alpha(opacity= + ( options.opacity - 0 ) * 100 + );,
            'opacity': options.opacity,
            'display': 'block'
        });
        $(doc.body).append(_this.maskdiv);
        if (_this.contentdiv) {
            $(doc.body).append(_this.contentdiv);
            _this.contentdiv.show();
            _this.contentdiv.draggable({
                containment: document,
                cursor: 'move',
                handle: .dialog_head
            });
            $(_this.maskdiv).on(mousemove, function() {
                $(body).preventscroll();
            });
            $(_this.maskdiv).on(mouseout, function() {
                $(body).livescroll();
            });
            if ($(.cke).length == 0 && $(.dialog_body).length > 0) {
                $(.dialog_body).preventouterscroll();
            }
        }
    };
    this.remove = function () {
        if (_this.contentdiv) {
            _this.contentdiv.remove();
        }
        if (_this.maskdiv) {
            _this.maskdiv.remove();
        }
        $(body).livescroll();
    };
    this.formatpercentnumber = function (value, whole) {
        if (isnan(value) && typeof value === string) {
            if (value.indexof(%) !== -1) {
                value = (value.replace(%, ) / 100) * whole;
            } else if (value.indexof(px) !== -1) {
                value = value.replace(px, );
            }
        }
        return math.ceil(value);
    };
    this.position = function (dialog, dialogbody, minusheight) {
        dialog = dialog || $(.showdialogdiv);
        if (dialog[0]) {
            var clientwidth = document.documentelement.clientwidth;
            var clientheight = document.documentelement.clientheight;
            var width = _this.formatpercentnumber(dialog.data(position).width, clientwidth) || dialog.width();
            var height = _this.formatpercentnumber(dialog.data(position).height, clientheight) || dialog.height();
            width = width             height = height             $(dialog).css({
                width: width + px,
                height: height + px,
                top: math.ceil((clientheight - height) / 2) + px,
                left: math.ceil((clientwidth - width) / 2) + px
            });
            dialogbody = dialogbody || $(.dialog_body);
            if (dialogbody[0]) {
                minusheight = minusheight || ($(.dialog_head).outerheight() + $(.dialog_foot).outerheight());
                var dialogbodyheight = height - minusheight;
                dialogbody.height(dialogbodyheight);
            }
        }
    }
}
var createdialogtemplate = function (optionarg, contenthtml, savebtnclickhandler) {
    var options = {
        action: ,
        title: ,
        width: 50%,
        height: 50%
    };
    if (optionarg) {
        for (var prop in optionarg) {
            options[prop] = optionarg[prop];
        }
    }
    var newdialog = $();
    var dialoghead = $().appendto(newdialog);
    $().html(options.action + + options.title).appendto(dialoghead);
    var dialogclose = $().appendto(dialoghead);
    var dialogbody = $().html(contenthtml).appendto(newdialog);
    var dialogfoot = $().appendto(newdialog);
    var newdiv = $().appendto(dialogfoot);
    var actioncanceldiv = $().appendto(newdiv);
    dialogclose.on(click, function() {
        dialoghelper.remove();
    });
    actioncanceldiv.on(click, function() {
        dialoghelper.remove();
    });
    var newa = $().appendto(actioncanceldiv);
    $().appendto(newa);
    $().html(cancel).appendto(newa);
    var actionsavediv = $().appendto(newdiv);
    var newb = $().appendto(actionsavediv);
    newb.on('click', function () {
        if (typeof savebtnclickhandler == function) {
            savebtnclickhandler();
        }
    });
    $().appendto(newb);
    $().html(save).appendto(newb);
    var minusheight = dialoghead.outerheight() + dialogfoot.outerheight();
    newdialog.data(position, {
        width: options.width,
        height: options.height
    });
    dialoghelper.position(newdialog, dialogbody, minusheight);
    return newdialog;
};
var changedialoglayout = function(optionarg, dialogobj) {
    var options = {
        width: 70%,
        height: 90%
    };
    if (optionarg) {
        for (var prop in optionarg) {
            options[prop] = optionarg[prop];
        }
    }
    var dialogbody = $(dialogobj).find(.dialog_body);
    var dialoghead = $(dialogobj).find(.dialog_head);
    var dialogfoot = $(dialogobj).find(.dialog_foot);
    var other =  math.round(dialogbody.css(padding-top).replace(/[a-z]/ig, )) + math.round(dialogbody.css(padding-bottom).replace(/[a-z]/ig, ));
    var minusheight = dialoghead.outerheight() + dialogfoot.outerheight() + other;
    dialogobj.data(position, {
        width: options.width,
        height: options.height
    });
    dialoghelper.position(dialogobj, dialogbody, minusheight);
};
以上就是本文所分享的全部内容了，希望大家能够喜欢。