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 = $('<div>');
         _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 = $("<div class='ShowDialogDiv' id='Dialog_" + options.Title + "'>");
     var DialogHead = $("<div class='Dialog_Head'>").appendTo(newDialog);
     $("<span class='HeadLabel'>").html(options.Action + " " + options.Title).appendTo(DialogHead);
     var DialogClose = $("<span class='DialogClose'>").appendTo(DialogHead);
     var DialogBody = $("<div class='Dialog_Body'>").html(contentHtml).appendTo(newDialog);
     var DialogFoot = $("<div class='Dialog_Foot'>").appendTo(newDialog);
     var newDiv = $("<div class='Right'>").appendTo(DialogFoot);
     var ActionCancelDiv = $("<div class='ActionButtonContainer' title='Cancel'>").appendTo(newDiv);
     DialogClose.on("click", function() {
         dialogHelper.remove();
     });
     ActionCancelDiv.on("click", function() {
         dialogHelper.remove();
     });
     var newA = $("<div class='ActionButton' id='ActionButtonCancel'>").appendTo(ActionCancelDiv);
     $("<div class='Icon Cancel'>").appendTo(newA);
     $("<div class='Title IconTitle'>").html("Cancel").appendTo(newA);
     var ActionSaveDiv = $("<div class='ActionButtonContainer' title='Save'>").appendTo(newDiv);
     var newB = $("<div class='ActionButton ActionButtonAttention' id='ActionButtonSave'>").appendTo(ActionSaveDiv);
     newB.on('click', function () {
         if (typeof saveBtnClickHandler == "function") {
             saveBtnClickHandler();
         }
     });
     $("<div class='Icon Save'>").appendTo(newB);
     $("<div class='Title IconTitle SaveButton'>").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);
 };