jQuery pop-up box code encapsulates DialogHelper

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 < 300 ? 300 : width;
            height = height < 450 ? 450 : 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);
};

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

Related labels：

jquery Pop-up box

source：php.cn

Previous article：Analysis of invalid problem of $.click() in jQuery_jquery Next article：Eclipse configuration Javascript development environment graphic tutorial_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

jQuery pop-up box code encapsulates DialogHelper_jquery