Home > Developer > JavaScript

The pop-up layer of native js and the window in it is centered

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

Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Meta charset = "UTF-8">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "Author" CONTENT = "">
<Meta name = "Keywords" CONTENT = "">
<Meta name = "Description" CONTENT = "">
<Style type = "text/css">
*
{
Padding: 0px;
Margin: 0px;
}
# Idiv
{
Width: 900px;
Height: auto;
Position: absolute;
Z-index: 1000;
Border: 2px solid # ffffff;
Background: # ffffff;
}
</Style>

</HEAD>
<Body>

<Div id = "Idiv" style = "display: none;">
<A href = "javascript: void (0)" onclick = "closeDiv ()"> click Close layer </a>
<Br/> Differences Between document.doc umentElement <br/> document.doc umentElement
</Div>
<Div> <a href = "javascript: void (0)" id = "show" onclick = "show ()"> click to open the pop-up layer! </Div>
</Body>
<Script langue = "javascript">

Function show ()
{
Var Idiv = document. getElementById ("Idiv ");
Idiv. style. display = "block ";
// The following sections center the pop-up layer
Idiv.style.left.pdf (document.doc umentElement. clientWidth-Idiv.clientWidth)/2+document.doc umentElement. scrollLeft + "px ";
// Alert (document. body. scrollTop)
Var aa_scrollTop = document.doc umentElement. scrollTop | window. pageYOffset | document. body. scrollTop;
Idiv.style.top((document.doc umentElement. clientHeight-Idiv.clientHeight)/2 + aa_scrollTop + "px ";
// A problem occurs here. The pop-up layer is in the middle left and right corner, but the height is not centered. It is displayed in the upper part, causing the first part to be invisible. So we will temporarily Add the margin-top


// The following sections make the entire page unavailable
Var procbg = document. createElement ("div"); // create a div first
Procbg. setAttribute ("id", "mybg"); // defines the id of the div
Procbg. style. background = "#000000 ";
Procbg. style. width = "100% ";
Procbg. style. height = "100% ";
Procbg. style. position = "fixed ";
Procbg. style. top = "0 ";
Procbg. style. left = "0 ";
Procbg. style. zindexes = "500 ";
Procbg. style. opacity = "0.6 ";
Procbg. style. filter = "Alpha (opacity = 70 )";
// Cancel the scroll bar
Document. body. appendChild (procbg );
Document. body. style. overflow = "auto ";

// The following sections implement the drag and drop effect on the pop-up layer (if you want to move the div in the pop-up layer, just remove the following code)
/*
Var posX;
Var posY;
Idiv. onmousedown = function (e)
{
If (! E) e = window. event; // IE
PosX = e. clientX-parseInt (Idiv. style. left );
PosY = e. clientY-parseInt (Idiv. style. top );
Document. onmousemove = mousemove;
}
Document. onmouseup = function ()
{
Document. onmousemove = null;
}
Function mousemove (ev)
{
If (ev = null) ev = window. event; // IE
Idiv. style. left = (ev. clientX-posX) + "px ";
Idiv. style. top = (ev. clientY-posY) + "px ";
}*/

}
Function closeDiv () // close the pop-up layer
{

Var Idiv = document. getElementById ("Idiv ");
Var mybg = document. getElementById ("mybg ");
Document. body. removeChild (mybg );
Idiv. style. display = "none ";
Document. body. style. overflow = "auto"; // restore the page scroll bar
// Document. getElementById ("mybg"). style. display = "none ";
}
</Script>
</HTML>
// Change the above pop-up layer to implement its own loading function. Complete the webpage and hide loading.gif.

<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> New Document </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
</Head>
<Body onload = "subSomething ()">


</Body>
<Script type = "text/ecmascript">
Function show (addressImg, img_w, img_h ){
// Get the page height
Var h = (document.doc umentElement. scrollHeight> document.doc umentElement. clientHeight )? Document.doc umentElement. scrollHeight: document.doc umentElement. clientHeight;
// Obtain the page width
Var w = (document.doc umentElement. scrollWidth> document.doc umentElement. clientWidth )? Document.doc umentElement. scrollWidth: document.doc umentElement. scrollWidth;
Var procbg = document. createElement ("div"); // create a div first
Procbg. setAttribute ("id", "mybg"); // defines the id of the div
Procbg. style. background = "#555 ";
Procbg. style. width = "100% ";
Procbg. style. height = "100% ";
Procbg. style. position = "fixed ";
Procbg. style. top = "0 ";
Procbg. style. left = "0 ";
Procbg. style. zindexes = "500 ";
Procbg. style. opacity = "0.6 ";
Procbg. style. filter = "Alpha (opacity = 70 )";
// Cancel the scroll bar
Document. body. appendChild (procbg );
Document. body. style. overflow = "auto ";


Var pimg = document. createElement ("img"); // create an img
Pimg. setAttribute ("id", "bg_img"); // defines the id of the div
Pimg. setAttribute ("src", addressImg); // defines the id of the div
Var img_w = (w-img_w)/2;
Var img_h = (h-img_h)/2;
Pimg. style. top = img_h + "px ";
Pimg. style. left = img_w + "px ";
Pimg. style. position = "fixed ";
Pimg. style. opacity = "0.9 ";
Document. getElementById ("mybg"). appendChild (pimg );
}
Function closeDiv () // close the pop-up layer
{
Var mybg = document. getElementById ("mybg ");
Document. body. removeChild (mybg );
Document. body. style. overflow = "auto"; // restore the page scroll bar
// Document. getElementById ("mybg"). style. display = "none ";
}
Show ('loading/loading3.gif ', '123', '123 ');
Document. onreadystatechange = subSomething; // This method is executed when the page loading status changes.
Function subSomething (){
If (document. readyState = "complete") {// when the page loading status is complete
CloseDiv ();
}
}
</Script>
</Html>

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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