jquery encapsulates a simple, lightweight, and easy-to-drag, customizable-style, div+css-like popup with mask layer

Recent packaging addiction, think of a lightweight pop-up box, is the style and script separation, so re-encapsulated a bit, the style tag unified into JS. There are still some problems, but do not affect the use, interested students, can refer to the perfect, there are good suggestions, please enlighten me.

var popdialogdefaultconfig = {Hascover:true,//whether with matte layer colorofcover: "#000",                         Mask layer color transparencyofcover:80,//Matte layer Transparency (alpha value, opacity value obtained by conversion) BorderColor: "Blue", Border title background color titleheight:50,//title height Titlefont: ' 24px ' Microsoft Ya                        Hei "',//title font titlefontsize:24,//title Text size Titlecolor:" White ",    Title Text color titlefontfamily: "Microsoft Yahei",//Title font contentwidth:560,//Content box width contentheight:480,//height of the content box borderwidth:2,//Border width BackColor:                             "#EC90F6",//Background color serial:1,//serial number moveable:true,        Whether you can drag the mouse/* * Profile Merge */merge:function (newconfig) {var result = {};     For (var p in this) {       RESULT[P] = this[p];                        if (typeof (This[p])! = "function") {for (var q in newconfig) {if (p = = q) {                    RESULT[P] = Newconfig[q];    }}}} return result; }};function Popdialog (content, title, obj, popdialogconfig) {content = Content | |    "There's nothing here!"; title = Title | |    "Hint"; obj = obj | |    $ (document.body);    var dialog = new Object;    /* * pop-up box default style */var config = popdialogdefaultconfig.merge (popdialogconfig);     /* * Get popup HTML string according to the profile and popup object;        */if (!obj.id) {obj.id = "pop" + config.serial;    popdialogdefaultconfig.serial++;    } var opacity = (100-config.transparencyofcover)/100;    var width = config.contentwidth + config.borderwidth * 2;    var height = config.contentheight + config.borderwidth + config.titleheight; Dialog. Html = ' <div id= ' + obj.id + ' _cover ' style= ' background-color: ' + config. Colorofcover + '; width:100%;height:100%;p osition:absolute;filter:alpha (opacity= ' + config.transparencyofcover + ') ; opacity: ' + opacity + '; top:0;left:0; ></div> ' + ' <div id= "' + obj.id + ' _dialog" style= "Background-color: ' + config.bordercolor + ';p osition  : absolute;width: ' + width + ' px;height: ' + height + ' Px;top:calc (50%-' + HEIGHT/2 + ' px); Left:calc (50%-' + width/ 2 + ' px); " > ' + ' <div id= "' + obj.id + ' _top" style= "Height: ' + config.titleheight + ' px;line-height: ' + config.titl Eheight + ' Px;display:block;width:100%;background-color: ' + Config.bordercolor + '; Clear:both;vertical-align:middle ' > ' + ' <span id= "' + obj.id + ' _title" style= "display:inline-block;font-size: ' + config.titlefontsize + ' Px;padding-left:10px;color: ' + Config.titlecolor + '; " > ' + (title | | "hint") + ' </span> ' + ' <a style= ' display:block;float:right;text-decoration:none;margin-right:20px;c Lear:right;color:white;font-size:' + config.titleheight * 8/10 + ' px; "href=" # "onclick=" $ (\ ' # ' + obj.id + ' _dialog\ '). Remove (); $ (\ ' # ' + obj.id + ' _cover \ '). Remove (); " >X</a> ' + ' </div> ' + ' <div id= "' + obj.id + ' _body" style= "Background-color: ' + Co  Nfig.backcolor + '; width: ' + config.contentwidth + ' px;height: ' + config.contentheight + ' Px;border: ' + config.borderwidth + ' px Solid ' + Config.bordercolor + '; > ' + ' <div id= "' + obj.id + ' _content" style= "Background-color: ' + Config.backcolor + ';"    > ' + content + ' </div> ' + ' </div> ' + ' </div> '; Dialog.    Config = config; Dialog. Popdom = $ (dialog.    Html);    dialog.x = dialog.x1 = Dialog.y = dialog.y1 = Dialog.mousekey = 0; /* * Mouse Drag Popup */if (config.moveable) {var top = dialog.        Popdom.find ("#" + obj.id + "_top");            Top.on ("MouseDown", function (event) {Dialog.mousekey = 1;            $ (this). CSS ("cursor", "move"); Dialog.        Popdom.find ("#" + obj.id + "_content"). CSS ("display", "none");        });            Top.on ("MouseUp", function (event) {Dialog.mousekey = 0; $ (this). CSS ("cursor", "Default"); Dialog.        Popdom.find ("#" + obj.id + "_content"). CSS ("Display", "");        });            Top.on ("Mouseout", function (event) {Dialog.mousekey = 0; $ (this). CSS ("cursor", "Default"); Dialog.        Popdom.find ("#" + obj.id + "_content"). CSS ("Display", "");        });  Top.on ("MouseMove", function (event) {if (Dialog.mousekey = = 1) {if (dialog.x! = 0 | | dialog.y                    ! = 0) {dialog.x = event.pagex-dialog.x1;                    Dialog.y = event.pagey-dialog.y1;                    var parent = $ (this.parentelement);                    Parent.css ("Left", (Parent.position (). Left + dialog.x) + "px");                    Parent.css ("Top", (Parent.position (). Top + dialog.y) + "px");       dialog.x = dialog.x1 = Event.pagex;             Dialog.y = Dialog.y1 = Event.pagey;                    } else {dialog.x = dialog.x1 = Event.pagex;                Dialog.y = Dialog.y1 = Event.pagey;            }} else {dialog.x = Dialog.x1 = dialog.y = dialog.y1 = 0;        } return false;    }); } return dialog;};/ * * Expand the method of jquery object; */(function ($) {/* *) The method of closing the popup box */$.fn.        Closepopdialog = function () {var obj = this;            while (obj) {var Popdialog = $ ("#" + this.id + "_dialog");            if (popdialog) {popdialog.remove ();            } var popcover = $ ("#" + this.id + "_cover");            if (popcover) {popcover.remove ();        } obj = obj.parent;    }    }; /* * URL to get content and pop-up box to display the URL: Content that needs to be displayed * Popdialogconfig: Custom style * Example: $ (document.body). Popdialog ("/home/login", {backColor: "Gray", BorderColor: "Blue", BorDerwidth:2, contentwidth:600, contentheight:480}); */$.fn.        Popdialogbyurl = function (URL, title, popdialogconfig) {var obj = $ (this); Obj.        Closepopdialog (); if (URL) {$.ajax ({url:url, Cache:false, Success:function (res Ult) {if (result = = "[]" | | result = = "") {result = "The system is busy, please try again later!")                    ";                    } var pop = new Popdialog (result, title, this, popdialogconfig); Obj.append (pop.                Popdom);                        }, Error:function (Result) {if (result = = "[]" | | result = = "") { result = "System error, please contact the administrator!"                    ";                    } var pop = new Popdialog (result, title, this, popdialogconfig); Obj.append (pop.                Popdom);        }            });    }    }; /* * pop-up box shows how content is provided * content: what needs to be displayed * Popdialogconfig: FromDefine Style * Example: $ (document.body). Popdialog ("<div> This is an example of a popup box!)     </div> ", {backColor:" Gray ", BorderColor:" Blue ", Borderwidth:2, contentwidth:600, contentheight:480}); */$.fn.        popdialogbycontent = function (content, title, popdialogconfig) {var obj = $ (this); Obj.        Closepopdialog ();        var pop = new Popdialog (content, title, this, popdialogconfig); Obj.append (pop.    Popdom); };}) (JQuery);

jquery encapsulates a simple, lightweight, and easy-to-drag, customizable-style, div+css-like popup with mask layer