JavascriptDemo modal window _ javascript skills

I don't know much about it. I should have seen many websites use Jquery plug-ins. I personally think it is not flexible enough. The following Demo supports callback and can be directly referenced by modalDialog. js without any Jquery shadow.
Global. js

The Code is as follows:

Window. js = new myJs (); // to avoid repeated names, add a myJs object to the window object, and then call window. js on the page.
// Js object
Function myJs (){
This. x = 10;
}
// Below we will expand myJs
MyJs. prototype. alert = function (msg) {alert (msg) ;}// A alert method is used to test and call js. alert ('pop-up prompt ');
// Obtain the dom object with the specified Id
MyJs. prototype. $ = function (id) {return document. getElementById (id );}
MyJs. prototype. bodyWidth = document.doc umentElement. clientWidth;
MyJs. prototype. bodyHeight = document.doc umentElement. clientHeight;
MyJs. prototype. body = document. body;

The modalDialog. js file code is as follows:
Code

The Code is as follows:

// Modaldialog
Function modalDialog (){
This. uri = "about: blank"; // address
This. title = null; // title
This. width = 400; // default width
This. height = 300; // default height
This. borderColor = "black"; // border color
This. borderWidth = 2; // Border Width
This. callback = null; // callback Method
This. background = "black ";
This. titleBackground = "silver ";
}
ModalDialog. prototype. url = this. uri; // this is fine without any extension, but you can only prompt that this attribute cannot be found on the page.
ModalDialog. prototype. title = this. title;
ModalDialog. prototype. width = this. width;
ModalDialog. prototype. height = this. height;
ModalDialog. prototype. background = this. background;
ModalDialog. prototype. borderWidth = this. borderWidth;
ModalDialog. prototype. borderColor = this. borderColor;
ModalDialog. prototype. titleBackground = this. titleBackground;
ModalDialog. prototype. callback = this. callback;
// Call back
ModalDialog. prototype. call = function (callback) {if (callback! = Null) callback (this); if (this. callback! = Null) this. callback ();}
// Display
ModalDialog. prototype. show = function (){
Var js = window. js;
// Display details in it
Var x = js. bodyWidth, y = js. bodyHeight;
// First create a layer mask for the entire body
Var zp = "zp"; // mask layer id
Document. body. innerHTML + ="

";
Var mp = "mp"; // modal window layer id
Document. body. innerHTML + ="

"+
// Add the title
(This. title! = Null? "

"+ This. title +"

":" ") +
"

";
}
ModalDialog. prototype. close = function (){
Document. body. removeChild (window. js. $ ("mp "));
Document. body. removeChild (window. js. $ ("zp "));
}

Create modalDialog on the default.html page
Code

The Code is as follows:

Modal window Demo