The demo below supports callbacks that can be referenced directly by modaldialog.js, without any shadow of jquery
Global.js
Copy Code code as follows:
Window.js = new Myjs (); To avoid duplicate names, add a myjs to the Window object, and then we call window.js in the page
JS Object
function Myjs () {
This.x = 10;
}
Here we extend the MYJS
MyJs.prototype.alert = function (msg) {alert (msg);}//An alert method test calls Js.alert (' pop-up prompt ');
Gets the DOM object that made the 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;
The Modaldialog.js file code is as follows:
Code
Copy Code code as follows:
Modaldialog
function Modaldialog () {
This.uri = "About:blank"; Address
This.title = null; Title
This.width = 400; Default width
This.height = 300; Default High
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 can be done without expansion, but in the page can only be prompted not to find this property
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.C Allback (); }
Show
ModalDialog.prototype.show = function () {
var js = window.js;
To implement the details shown inside
var x = js.bodywidth, y = js.bodyheight;
First create a layer mask the entire body
var zdiv = "Zdiv"; Mask Layer ID
Document.body.innerHTML + + "<div id=" "+ Zdiv +" ' style= ' width: "+ x +" Px;height: "+ y +" Px;background-color: "+
This.background + ";p osition:absolute;top:0;left:0;" +
"Filter:alpha (opacity=80); Opacity:0.8;z-index: ' ></div> ';
var mdiv = "MDiv"; modal window Layer ID
Document.body.innerHTML + + "<div id= '" + MDiv + "' style= ' width:" + this.width + "Px;height:" + this.height + "px;" +
"Border:solid" + this.borderwidth + "px" + This.bordercolor + "; Z-index:20;position:absolute;top:" +
(y-this.height)/2 + "; Left:" + (X-this.width)/2 + "; ' > "+
Add title
(This.title!= null?) "<div style= ' background:" + This.titlebackground + "; line-height:30px;padding:0 10px;width:100% ' > ' + this.title + "</div>": "" "+
"<div style= ' padding:1px; ' ><iframe src= ' + This.uri + ' ' frameborder= ' 0 ' scrolling= ' no ' style= ' width: + (this.width) + "Px;height:" +
(This.title!= null this.height-30:this.height) + px; ></iframe></div></div> ";
}
ModalDialog.prototype.close = function () {
Document.body.removeChild (window.js.$ ("MDiv"));
Document.body.removeChild (window.js.$ ("Zdiv"));
}
Create Modaldialog on default.html page
Code
Copy Code code as follows:
<title> modal window demo</title>
<!--The following JS file for our public JS file-->
<script type= "Text/javascript" src= "Global.js" ></script>
<!--modaldialog UI js file-->
<script type= "Text/javascript" src= "Modaldialog.js" ></script>
<script type= "Text/javascript" >
var MD; For page callbacks
var uri = "/test.html";
function ShowModalDialog () {
Process Open modal window
var m = new Modaldialog ();
M.uri = URI;
M.title = "Modal window";
M.background = "White";
M.bordercolor = "Orange";
M.borderwidth = 2;
M.titlebackground = "Gold";
M.callback = function () {m.close ();}
M.call (); This callback method is invoked in the URI of the Modaldialog.
M.show ();
md = m;
}
</script>
</style>
<body>
<div>
Realizing modaldialog<br/> with javascript+css
There's a plugin in the jquery framework that can do the same, but we're talking about our own implementation.
<br/>
<input id= "Btopendialog" type= "button" value= "dot modal window!" onclick= "ShowModalDialog ()"/>
</div>
</body>
Use Window.parent.md.call () to trigger the callback function in the Modaldialog page
File pack Cloud Habitat Community download
