jQuery pop-up box code encapsulates DialogHelper_jquery

After looking at the jQueryUI Dialog example, the effect is not bad, but it is a bit awkward to use and the code written is a bit twisted and needs to be encapsulated again! So there is the following simple DialogHelper auxiliary class. Because the focus of this article is on ideas, the current version of the code is still very rough. The idea is right, and whatever it is encapsulated in the future is just a formality. I hope this idea can inspire everyone. At the same time, everyone is welcome to expand their thinking and put forward better suggestions for improvement.

Copy code The code is as follows:

//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);
};

以上就是本文所分享的全部内容了，希望大家能够喜欢。