Jquery encapsulates a simple and lightweight drag-and-drop customizable style plain div + css imitation modal pop-up box with Mask Layer

Jquery encapsulates a simple and lightweight drag-and-drop customizable style plain div + css imitation modal pop-up box with Mask Layer

Recently, the encapsulation is addictive. I think of a lightweight pop-up box that was previously created. The style is separated from the script, So I re-encapsulated it and unified the style label into js.
There are still some problems, but they do not affect the use. If you are interested, you can refer to the improvement. If you have good suggestions, please kindly advise.

 

 

Var popdialogdefaconfig Config = {hasCover: true, // whether or not the mask layer colorOfCover: "#000", // The Mask Layer color transparencyOfCover: 80, // the transparency of the mask layer (alpha value, the opacity value is converted to) borderColor: "blue", // border title background color titleHeight: 50, // Title height titleFont: '24px "Microsoft Yahei "', // Title fontsize: 24, // Title text size titleColor: "white", // Title text color titleFontFamily: "Microsoft Yahei", // title Font contentWidth: 560, // content frame width contentHeight: 480, // content frame height B OrderWidth: 2, // Border Width backColor: "# EC90F6", // background color serial: 1, // serial number moveAble: true, // whether you can drag the configuration file/** Merge configuration files */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, popDialogConfig) {content = content | "there is nothing here! "; Title = title |" prompt "; var dialog = new Object;/** default style in the pop-up box */var config = PopDialogDefaultConfig. merge (popDialogConfig);/** get the html string in the pop-up box based on the configuration file and pop-up object; */if (! Config. id) {config. id = "pop" + config. serial; popdialogdefaconfig config. serial ++;} var opacity = (100-config. transparencyOfCover)/100; var width = config. contentWidth + config. borderWidth * 2; var height = config. contentHeight + config. borderWidth + config. titleHeight; dialog. html = (config. hasCover?'

': "") + ''+ (Title |" prompt ") + ''+ 'X' +'' + content + ''; dialog. config = config; dialog. popDom = $ (dialog. html); var top = dialog. popDom. find ("#" + config. id + "_ Top"); var parent =$ (dialog. popDom [1]); var close = dialog. popDom. find ("#" + config. id + "_ Close");/** bind close button event */Close. bind ("click", function () {var popdialog =$ ("#" + config. id + "_ Dialog"); if (popdial Og & popdialog! = Undefined) {popdialog. remove ();} var popcover = $ ("#" + config. id + "_ Cover"); if (popcover & popcover! = Undefined) {popcover. remove ();} popdialogdefaconfig config. serial --;})/** drag the mouse to bring up the dialog box */dialog. x = dialog. y = dialog. mousekey = 0; if (config. moveAble) {top. bind ("mousedown", function (event) {dialog. mousekey = true; top.css ("cursor", "move"); dialog. x = event. pageX-parseInt(parent.css ("left"); dialog. y = event. pageY-parseInt(parent.css ("top"); parent. fadeTo (20, 0.5); // click it to start dragging and transparent }). mouseou T (function () {dialog. mousekey = false; top.css ("cursor", "default"); parent. fadeTo ("fast", 1); // stop moving with the mouse removed and restore to Opacity}); $ (document ). mousemove (function (e) {if (dialog. mousekey) {parent.css ({top: e. pageY-dialog. y, left: e. pageX-dialog. x });}}). mouseup (function () {dialog. mousekey = false; top.css ("cursor", "default"); parent. fadeTo ("fast", 1); // stop moving with the mouse removed and restore to Opacity});} return dialog ;};/** Expand the jquery object method; */(function ($) {/** close the pop-up box method * serial: Close the internal object number * Example: $ (document. body ). closePopDialog (1); */$. fn. closePopDialog = function (serial) {var popdialog =$ ("# pop" + serial + "_ Dialog"); if (popdialog & popdialog! = Undefined) {popdialog. remove ();} var popcover = $ ("# pop" + serial + "_ Cover"); if (popcover & popcover! = Undefined) {popcover. remove () ;}};/** Method for retrieving content based on the url and displaying it in the pop-up box * url: url of the content to be displayed * title: title * popDialogConfig: custom style * Example: $ (document. body ). popDialog ("/home/login", "Test Url", {backColor: "gray", borderColor: "blue", borderWidth: 2, contentWidth: 600, contentHeight: 480}); */$. fn. popDialogByUrl = function (url, title, popDialogConfig) {var obj = $ (this); if (url) {$. ajax ({url: url, ca Che: false, success: function (result) {if (result = "[]" | result = "") {result = "the system is busy. Please try again later! ";} Var pop = new PopDialog (result, title, popDialogConfig); obj. append (pop. popDom) ;}, error: function (result) {if (result = "[]" | result = "") {result = "system error. Contact the administrator! ";} Var pop = new PopDialog (result, title, popDialogConfig); obj. append (pop. popDom) ;}}};};/** method of displaying the provided content in the pop-up box * content: content to be displayed * title: title * popDialogConfig: custom style * Example: $ (document. body ). popDialog ("this is an example of a pop-up box! "," Test Content ", {backColor:" gray ", borderColor:" blue ", borderWidth: 2, contentWidth: 600, contentHeight: 480}); */$. fn. popDialogByContent = function (content, title, popDialogConfig) {var pop = new PopDialog (content, title, popDialogConfig); $ (this ). append (pop. popDom) ;};}) (jQuery );