Javascript demo modal window

Last Update:2018-12-08 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The following demo supports callback and can be directly referenced by modaldialog. js without any jquery shadow.
Global. js CopyCode 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 on the page. JS
// 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 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 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 zdiv = "zdiv"; // mask layer ID
Document. body. innerhtml + = "<Div id = '" + zdiv + "'style = 'width:" + x + "PX; Height:" + Y + "PX; Background-color: "+
This. Background + "; position: 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 the 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> ";
}
Modaldialog. Prototype. Close = function (){
Document. Body. removechild (window. js. $ ("mdiv "));
Document. Body. removechild (window. js. $ ("zdiv "));
}

Create modaldialog on the default.html page
Code Copy code The Code is as follows: <HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> modal window demo </title>
<! -- The following JS file is 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; // used for page callback
VaR uri = "/test.html ";
Function showmodaldialog (){
// Process opening the 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 called in the URI of modaldialog
M. Show ();
MD = m;
}
</SCRIPT>
</Style>
</Head>
<Body>
<Div>
Use JavaScript + CSS to implement modaldialog <br/>
There is a plug-in the jquery framework to achieve this effect, but we are talking about self-implementation.
<Br/>
<Input id = "btopendialog" type = "button" value = "hitting mode window! "Onclick =" showmodaldialog () "/>
</Div>
</Body>
</Html>

On the modaldialog page, use window. Parent. md. Call () to trigger the callback function.
Download the package

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Javascript demo modal window

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support