javascript Demo modal window_javascript skills

The following Demo supports callbacks and can be used directly by referencing modalDialog.js. There is no shadow of Jquery
global.js

Copy code The code is as follows:

window.js = new myJs(); //In order to avoid name duplication, we change the name, attach a myJs object to the window object, and then we call window in the page .js
//js object
function myJs() {
this.x = 10;
}
//Let’s extend myJs below
myJs.prototype.alert = function (msg) { alert(msg); } //An alert method test calls js.alert('pop-up prompt');
//Get the dom object with the specified ID
myJs.prototype.$ = function ( id) { return document.getElementById(id); }
myJs.prototype.bodyWidth = document.documentElement.clientWidth;
myJs.prototype.bodyHeight = document.documentElement.clientHeight;
myJs.prototype.body = document.body;

modalDialog.js file code is as follows:
Code

Copy 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 possible without extension, but the page will only prompt that this property cannot be found
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;
//Trigger callback method
modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != null) this.callback(); }
//Show
modalDialog.prototype.show = function () {
var js = window.js;
//Implement the display details inside
var x = js.bodyWidth, y = js.bodyHeight;
//First create a layer mask to cover the entire body
var zdiv = "zdiv"; //mask layer id
document.body.innerHTML = "

";
var mdiv = "mdiv"; //Modal window layer id
document.body.innerHTML = "

"
//Add title
(this.title ! = null ? "

" this.title "

" : "" )
"

" ;
}
modalDialog.prototype.close = function () {
document.body.removeChild(window.js.$("mdiv"));
document.body.removeChild(window. js.$("zdiv"));
}

default.html Create modalDialog
Code

Copy Code The code is as follows:

Use javascript css to implement ModalDialog

There is a plug-in in the Jquery framework that can also achieve this effect. But what we are talking about is implementing it yourself

Use window.parent.md.call() to trigger the callback in the modalDialog page Function
File packaging script home download