Javascript implementation click the button to bring up a method that can close the layer window and the webpage background becomes grayed out at the same time

Last Update:2018-01-02 Source: Internet

Author: User

Tags border color

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

Javascript implementation click the button to bring up a method that can close the layer window and the webpage background becomes grayed out at the same time

The example in this article describes how to click the javascript implementation button to bring up a method that can close the layer window while the webpage background is grayed out. Share it with you for your reference. The specific analysis is as follows:

Click the button here to bring up a closed Layer window, and the background of the webpage becomes grayed out. The QQ login effect is often seen on QQ websites, which is similar to this one, the code segment is based on JavaScript and is used according to your situation. Sometimes it is implemented using CSS.

<Html>

<Head>

<Title> A layer is displayed, and the page is grayed out. </title>

Function alertWin (title, msg, w, h ){

Var titleheight = "23px"; // window title height

Var bordercolor = "#336699"; // The border color of the prompt window.

Var titlecolor = "# FFFFFF"; // window title Color

Var titlebgcolor = "#336699"; // window title background color

Var bgcolor = "# FFFFFF"; // the background color of the prompt content

Var iWidth = document.doc umentElement. clientWidth;

Var iHeight = document.doc umentElement. clientHeight;

Var bgObj = document. createElement ("div ");

BgObj.style.css Text = "position: absolute; left: 0px; top: 0px; width:" + iWidth + "px; height:" + Math. max (document. body. clientHeight, iHeight) + "px; filter: Alpha (Opacity = 30); opacity: 0.3; background-color: #000000; z-index: 101 ;";

Document. body. appendChild (bgObj );

Var msgObj = document. createElement ("div ");

MsgObj.style.css Text = "position: absolute; font: 11px ''; top:" + (iHeight-h)/2 + "px; left:" + (iWidth-w) /2 + "px; width:" + w + "px; height:" + h + "px; text-align: center; border: 1px solid" + bordercolor + "; background-color: "+ bgcolor +"; padding: 1px; line-height: 22px; z-index: 102 ;";

Document. body. appendChild (msgObj );

Var table = document. createElement ("table ");

MsgObj. appendChild (table );

Table.style.css Text = "margin: 0px; border: 0px; padding: 0px ;";

Table. cellSpacing = 0;

Var tr = table. insertRow (-1 );

Var titleBar = tr. insertCell (-1 );

TitleBar.style.css Text = "width: 100%; height:" + titleheight + "px; text-align: left; padding: 3px; margin: 0px; font: bold 13px ' '; color: "+ titlecolor +"; border: 1px solid "+ bordercolor +"; cursor: move; background-color: "+ titlebgcolor;

TitleBar. style. paddingLeft = "10px ";

TitleBar. innerHTML = title;

Var moveX = 0;

Var moveY = 0;

Var moveTop = 0;

Var moveLeft = 0;

Var moveable = false;

Var docMouseMoveEvent = document. onmousemove;

Var docMouseUpEvent = document. onmouseup;

TitleBar. onmousedown = function (){

Var evt = getEvent ();

Moveable = true;

MoveX = evt. clientX;

MoveY = evt. clientY;

MoveTop = parseInt (msgObj. style. top );

MoveLeft = parseInt (msgObj. style. left );

Document. onmousemove = function (){

If (moveable ){

Var evt = getEvent ();

Var x = moveLeft + evt. clientX-moveX;

Var y = moveTop + evt. clientY-moveY;

If (x> 0 & (x + w <iWidth) & y> 0 & (y + h <iHeight )){

MsgObj. style. left = x + "px ";

MsgObj. style. top = y + "px ";

}

};

Document. onmouseup = function (){

If (moveable ){

Document. onmousemove = docMouseMoveEvent;

Document. onmouseup = docMouseUpEvent;

Moveable = false;

MoveX = 0;

MoveY = 0;

MoveTop = 0;

MoveLeft = 0;

}

};

}

Var closeBtn = tr. insertCell (-1 );

CloseBtn.style.css Text = "cursor: pointer; padding: 2px; background-color:" + titlebgcolor;

CloseBtn. innerHTML = "<span style = 'font-size: 15pt; color:" + titlecolor + "; '> × </span> ";

CloseBtn. onclick = function (){

Document. body. removeChild (bgObj );

Document. body. removeChild (msgObj );

}

Var msgBox = table. insertRow (-1). insertCell (-1 );

MsgBox.style.css Text = "font: 10pt '';";

MsgBox. colSpan = 2;

MsgBox. innerHTML = msg;

// Obtain the Event object for compatibility with IE and FireFox

Function getEvent (){

Return window. event | arguments. callee. caller. arguments [0];

}

</Script>

</Head>

<Body>

<Input type = "button" value = "Click here"

Onclick = "alertWin ('click to bring up a layer window that can be closed and the webpage grayed out ', 290,208);"/>

</Body>

</Html>

I hope this article will help you design javascript programs.

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