Haga clic en el efecto de la capa pop -Up;

Autor：Eve Cole Fecha de actualización：2025-03-01 03:32:01

Copiar código del código de la siguiente manera:

<html>

<title> Efectos especiales de Web Efectos especiales: El efecto del fondo web después de la ventana emergente se vuelve más oscura </title>

<!-Agregue el siguiente código a entre <fead> y </head>->

. Opacidad: .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; Desbordamiento: auto;}

</style>

</ablo>

<Body>

<!-Agregue el siguiente código a entre <body> y </body>->

Haga clic aquí para abrir la ventana </a>

Cerrar </a>

<br> Contenido de la ventana

</div>

</body>

</html>

Ejemplo 2:

Copiar código del código de la siguiente manera:

<title> Página no titina </title>

Función HID ()

{{

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

div4.style.display = "bloque";

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 = "bloque";

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";

}

Función vis ()

{{

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

div4.style.display = "ninguno";

var div3 = document.getElementById ("div2");

div3.style.display = "ninguno";

div3.style.width = "0px";

div3.style.head = "0px";

div4.innerhtml = "<a onClick = 'vis ()' style = 'display: block' id = 'text'> Haga clic para cerrar </a> <br /> <input name = 'textbox2' type = 'text' id = 'textbox2' /> <br /> <input id = 'button3' type = 'button' value = 'button' onClick = 'return button3_onclick () ";

}

</script>

</ablo>

<Body>

<!-dwLayouttable->

<tr>

<a onClick = "Hid ()"> Haga clic para mostrar </a> <Br />

<Div style = "Color: White; Background-Color: Green; Display: Ninguno;"

<a onClick = "vis ()" style = "display: block" id = "text"> haga clic para cerrar </a> <br />

<Br />

<ASP: TextBox id = "TextBox2" Runat = "Server"> < /Asp: TextBox> <Br />

</div>

</form> </td>

</tr>

</table>

</div>

</body>

</html>

Ejemplo 3:

Copiar código del código de la siguiente manera:

<title> Haga clic en el efecto Pop -Up Layer </title>

* {margen: 0;}

Cuerpo {Font-Size: 12px;}

#Container Div {Margin-top: 5px;}

#Select_city h3 {float: izquierda;}

#main_city,#all_province {claro: ambos;}

#Main_City Div,#All_Province Div {ancho: 600px;

#Main_City H4,#All_Province H4 {Float: Left;

#Main_City Div Span,#All_Proving Div

#Float_lay {ancho: 200px;

</style>

// Capa pop

Función OpenLayer (objid, conid) {

var arrayPageSize = getPageSize ();

var arraypagescroll = getPageScroll ();

if (! document.getElementById ("popupaddr") {) {

// Crear una capa de contenido pop -Up

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

// Establezca los atributos y los estilos en este elemento

Popupdiv.setAttribute ("id", "popupaddr")

popupdiv.style.position = "Absolute";

popupdiv.style.border = "1px sólido #ccc";

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

// Crear una capa de fondo pop -Up

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 (opacidad = 50)";

Bodyback.Style.Opacity = 0.5;

Bodyback.style.background = "#ddf";

// Implementar el pop -up (después de insertar el elemento de destino)

var myBody = document.getElementById (objid);

InsertAft (PopupDiv, MyBody);

InsertAfter (Bodyback, MyBody);

}

// Muestra la capa de fondo

document.getElementById ("BodyBG").

// Muestra la capa de contenido

var postobj = document.getElementById ("Popupaddr")

pos.innerhtml = document.getElementById (conf) .innerhtml;

pos.style.display = "";

// deja que la capa pop -UP sea verticalmente a la izquierda y derecha en la página (unificada)

// popobj.style.width = "600px";

// popobj.

// deja que la capa pop -UP sea verticalmente a la izquierda y derecha en la página (personalidad)

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';

}

// Obtener el tamaño original de la capa de contenido

Función getConsize (conf) {

var conobj = document.getElementById (conf)

conobj.style.position = "Absolute";

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

conobj.style.display = "";

Var arrayconsize = [conobj.offsetwidth, connable

conobj.

Devolver ArrayConsize;

}

Función InsertAfter (Newslement, TargetElement) {// insertar

var parent = TargetElement.ParentNode;

If (parent.lastchild == TargetElement) {

Parent.appendchild (periódico);

}

demás {

Parent.insertbefore (Newslement, TargetElement.NextSibling);

}

// Obtén la altura de la barra rodante

función 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;

}

// Obtener el tamaño real de la página

función 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;

} Demás {

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;

} Demás {

payHeight = yScroll;

}

if (xscroll <windowwidth) {

PageWidth = WindowWidth;

} Demás {

PageWidth = xscroll;

}

ArrayPageSize = New Array (PageWidth, PageHeight, Windowwidth, WindowsHeight)

Devolver ArrayPageSize;

}

// Cerrar la capa pop -Up

Función CloseLayer () {

document.getElementById ("PopUpAddr").

document.getElementById ("BodyBG").

Devolver falso;

}

</script>

</ablo>

<Body>

<!-El primer contenido de la capa emergente->

<div id = "tabtop-l"> <strong> Configuración de estilo </strong> </div>

<div id = "tabtop-r" onClick = "Closelayer ()"> <strong> Close </strong> </div>

</div>

<div id = "tabcontent"> Mostrar contenido aquí </div>

</div>

<br>

<!-El segundo contenido de la capa emergente->

<div id = "tabtop-l2"> <strong style = "color: bloque"> establecer las indicaciones </strong> </div>

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

</div>

<p> Muestre el contenido rápido aquí "

<p> consejos 1

<p> Recordatorio 2

</div>

<br>

1 <br>

<br>

<!-El tercer contenido de la capa emergente->

<div id = "tabtop-l3"> <strong style = "color: rojo; font-size: 20px"> demostración de estilo </strong> </div>

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

</div>

<div id = "tabcontent3"> El contenido de la pantalla aquí </div>

</div>

</body>

</html>