Click the pop -up layer effect & amp; after the pop -up window pops up, the background of the web background becomes the implementation code

Author：Eve Cole Update Time：2025-03-01 03:32:01

Copy code code as follows:

<html>

<head>

<Title> Web special effects-window special effects-The effect of the web background after pop-up window becomes darker </Title>

<!-Add the following code to between <head> and </head >->

.black_overlay {display: none; positive: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001;- Moz-opcity: 0.8; OPACITY: .80; Filter: Alpha (OPACITY = 80);}

.white_content {display: none; posity: absolute; Top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; 3px solid; Group-color: white; z-index : 1002; Overflow: Auto;}

</style>

</head>

<body>

<!-Add the following code to between <body> and </body >->

Click here to open the window </a>

Close </a>

<br> Window content

</div>

</body>

</html>

Example 2:

Copy code code as follows:

<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">

<Title> Non -Title Page </title>

Function Hid ()

{{

var div4 = document.GetelementByid ("div1");

div4.style.display = "block";

div4.style.width = "200px";

div4.style.head = "150px";

div4.style.zindex = "9999";

div4.style.top = "43%";

div4.style.left = "43%";

div4.style.position = "absolute";

var div3 = document.GetelementByid ("DIV2");

div3.style.display = "block";

div3.style.width = "1000px";

div3.style.zindex = "9998";

div3.style.position = "absolute";

div3.style.head = document.body.offsetheight;

div3.style.top = "0px";

div3.style.left = "0px";

}

Function Vis ()

{{

var div4 = document.GetelementByid ("div1");

div4.style.display = "None";

var div3 = document.GetelementByid ("DIV2");

div3.style.display = "None";

div3.style.width = "0px";

div3.style.head = "0px";

div4.innerhtml = "<a Onclick = 'VIS ()' Style = 'Display: BLOCK' ID = 'Text'> Click to close </a> <br /> <input name = 'Textbox2' Type = 'Text' id = 'textbox2' /> <br /> <input id = 'Button3' Type = 'Button' Value = 'Button' Onclick = 'RETURN Button3_ONCLICK () ";

}

</script>

</head>

<body>

<!-dwlayouttable->

<tr>

<a OnClick = "HID ()"> Click to display </a> <br />

<a OnClick = "VIS ()" STYLE = "Display: Block" ID = "Text"> Click to close </a> <br />

<br />

<asp: textbox id = "textbox2" runat = "server"> < /asp: textbox> <br />

</div>

</form> </td>

</tr>

</table>

</div>

</body>

</html>

Example 3:

Copy code code as follows:

<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">

<head>

<Title> Click the pop -up layer effect </title>

<Style>

* {margin: 0;}

Body {font-size: 12px;}

#Container div {margin-top: 5px;}

#Select_city H3 {float: left;}

#main_city,#all_province {clear: both;}

#Main_city div,#all_province div {width: 600px; clear: left;}

#Main_city H4,#All_province H4 {Float: left; Display: Inline; FONT-SIZE: 16px;}

#Main_city div span,#all_provring div

#Float_Lay {width: 200px; height: 120px; border: 1px #D1d1d1 solid; position: absolute; background: #fff; z-index: 999; Display: none;}.

</style>

// pop layer

Function Openlayer (Objid, Conid) {

var arrayPageSize = getpageSize (); // call the getPageSize () function

var arrayPageScroll = getpageScroll (); // Call the getPageScroll () function

if (! Document.GetelementByid ("Popupaddr") {) {

// Create a pop -up content layer

var pospdiv = document.createelement ("div");

// Set the attributes and styles to this element

Popupdiv.Setattribute ("ID", "Popupaddr")

popupdiv.style.position = "Absolute";

popupdiv.style.Border = "1px solid #ccc";

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

// Create a pop -up background layer

var bodyback = document.createElement ("div");

Bodyback.settattribute ("ID", "Bodybg")

bodyback.style.position = "absolute";

bodyback.style.width = "100%";

Bodyback.style.head = (ArrayPageSize [1] + 35 + 'PX');

bodyback.style.zindex = 98;

bodyback.style.top = 0;

bodyback.style.left = 0;

bodyback.style.filter = "alpha (opacity = 50)";

bodyback.style.oPacity = 0.5;

bodyback.style.background = "#ddf";

// Implement the pop -up (after inserting the target element)

var mybody = document.GetelementByid (objid);

Insertaft (Popupdiv, Mybody); // Execute the function Insertafter ()

Insertafter (BodyBack, Mybody); // Execute the function Insertafter ()

}

// Display the background layer

document.GetelementByid ("Bodybg"). STYLE.DISPLAY = "";

// Display the content layer

var postobj = document.GetelementByid ("Popupaddr")

pos.innerhtml = document.GetelementByid (conf) .innerHtml;

pos.style.display = "";

// Let the pop -up layer vertically left and right in the page (unified)

// popObj.style.Width = "600px";

// popObj. Style.height = "400px";

// popObj. Style.top = ArrayPageScroll [1] + (ArrayPageSize [3] -35-400) / 2 + 'px';

// popObj. Style.left = (ArrayPageSize [0] -20-600) / 2 + 'px';

// Let the pop -up layer vertically left and right in the page (personality)

var arrayConsize = getconsize (conf)

pos.style.top = ArrayPageScroll [1] + (ArrayPageSize [3] -ArrayConsize [1]) / 2-50 + 'PX';

pos.style.left = (ArrayPageSize [0] -ArrayConsize [0]) / 2 -30 + 'px';

}

// Get the original size of the content layer

Function getConsize (conf) {

var conobj = document.GetelementByid (conf)

conobj.style.position = "absolute";

conobj.style.left = -1000+"px";

conobj.style.display = "";

Var arrayConsize = [conobj.offsetwidth, conneable

conObj. Style.display = "None";

Return arrayConsize;

}

Function InsertaFTER (Newslement, Targetelement) {// Insert

var Parent = targetelement.parentnode;

If (Parent.lastchild == targetelement) {

Parent.appendchild (newslement);

}

else {

Parent.insertBeFore (Newslement, targetelement.nextSibling);

}

// Get the height of the rolling bar

function getpageScroll () {

Var YScroll;

if (Self.pageyoffset) {

yscroll = Self.pageyoffset;

} Else if (document.documentedElement && Document.documentlement.scroltop) {{{

yscroll = document.documentedLement.scrolltop;

} else if (document.body) {{

yscroll = document.body.scrolltop;

}

arrayPageScroll = New Array ('', YSCROLL)

Return arrayPageScroll;

}

// Get the actual size of the page

function getpageSize () {

var XScroll, YSCROLL;

if (Window.Innerheight && Window.scrollmaxy) {{

xscroll = document.body.scrollwidth;

yscroll = window.innerheight + window.scrollmaxy;

} Else if (document.body.scrollheight> document.body.offsetheight) {

sscroll = document.body.scrollwidth;

yscroll = document.body.scrollheight;

} Else {

xscroll = document.body.OffsetWidth;

yscroll = document.body.Offsetheight;

}

var Windowwidth, Windowheight;

// Var Pageheight, PageWidth;

if (Self.Innerheight) {

Windowwidth = Self.innerWidth;

Windowheight = Self.innerheight;

} Else if (document.documentedElement && Document.documentlement.clientheight) {

windowwidth = document.documentelement.clientWidth;

Windowheight = document.documentelement.clitingheight;

} else if (document.body) {{

windowwidth = document.body.clientWidth;

windowheight = document.body.clitingheight;

}

VAR PAGEWIDTH, Pageheight

if (YSCROLL <Windowheight) {

payheight = windowheight;

} Else {

payheight = yscroll;

}

if (XSCROLL <Windowwidth) {

pageWidth = Windowwidth;

} Else {

pageWidth = xscroll;

}

ArrayPageSize = New Array (PageWidth, Pageheight, Windowwidth, Windowheight)

Return arrayPageSize;

}

// Close the pop -up layer

Function Closelayer () {

document.GetelementByid ("Popupaddr"). Style.display = "None";

document.GetelementByid ("Bodybg"). STYLE.DISPLAY = "None";

Return false;

}

</script>

</head>

<body>

<!-The first pop-up layer content->

<div ID = "tabtop-l"> <strong> Style settings </strong> </div>

<div ID = "tabtop-r" onClick = "closelayer ()"> <strong> Close </strong> </div>

</div>

<div ID = "tabcontent"> Display content here </div>

</div>

<br>

<!-The second pop-up layer content->

<div ID = "tabtop-l2"> <strong style = "color: block"> Set prompts </strong> </div>

<div ID = "tabtop-r2" onClick = "Closelayer ()"> <strong style = "color: red"> Close </strong> </div>

</div>

<p> Show the prompt content here "

<p> Tips 1

<p> Reminder 2

</div>

<br>

1 <br>

<br>

<!-The third pop-up layer content->

<div ID = "tabtop-l3"> <strong style = "color: red; font-siZe: 20px"> Style demonstration </strong> </div>

<div ID = "tabtop-r3" onClick = "Closelayer ()"> <strong> Close </strong> </div>

</div>

<div ID = "tabcontent3"> The content of the display here </div>

</div>

</body>

</html>