Clique no efeito da camada pop & amp;

Autor：Eve Cole Data da Última Atualização：2025-03-01 03:32:01

Copie o código do código da seguinte forma:

<html>

<head>

<title> Efeitos especiais da Web-Window Efeitos Especiais-Efeito do fundo da Web Após a janela pop-up se tornar mais sombria </ititure>

<!-Adicione o seguinte código ao <Head> e </head>->

.black_overlay {Display: Nenhuma; Opacidade: .80;

.White_Content {Display: Nenhuma; Overflow: Auto;}

</style>

</head>

<Body>

<!-Adicione o seguinte código ao <body> e </body>->

Clique aqui para abrir a janela </a>

Fechar </a>

<br> Conteúdo da janela

</div>

</body>

</html>

Exemplo 2:

Copie o código do código da seguinte forma:

<title> página de não título </ititle>

Função hid ()

{{

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

div4.style.display = "bloco";

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

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

}

Função vis ()

{{

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

div4.style.display = "nenhum";

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

div3.style.display = "nenhum";

div3.style.width = "0px";

div3.style.head = "0px";

div4.innerhtml = "<a onclick = 'vis ()' style = 'display: block' id = 'text'> clique para fechar </a> <br /> <nome de entrada = 'textbox2' type = 'text' id = 'textbox2' /> <r /> <input id = 'button3' type = 'button' value = 'botão' onclick = 'return button3_onClick () ";

}

</script>

</head>

<Body>

<!-dwlayouttable->

<tr>

<a onclick = "hid ()"> clique para exibir </a> <r />

<a onclick = "vis ()" style = "display: block" id = "text"> clique para fechar </a> <r />

<br />

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

</div>

</morm> </td>

</tr>

</tabela>

</div>

</body>

</html>

Exemplo 3:

Copie o código do código da seguinte forma:

<head>

<title> Clique no efeito da camada pop </title>

* {margem: 0;}

Corpo {tamanho da fonte: 12px;}

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

#Select_city h3 {float: esquerda;}

#main_city,#all_province {clear: ambos;}

#Main_city div,#all_province div {width: 600px;

#Main_City H4,#all_province H4 {float: esquerda;

#Main_city div span,#all_provring div

#Float_lay {largura: 200px;

</style>

// camada pop

Função openLayer (objid, conid) {

var ArrayPagesize = getPagesize ();

var ArrayPagesCroll = getPagesCroll ();

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

// Crie uma camada de conteúdo pop -up

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

// Defina os atributos e estilos para este elemento

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

popupdiv.style.position = "absoluto";

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

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

// Crie uma camada de fundo 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 = "alfa (opacidade = 50)";

bodyback.style.Opacity = 0,5;

bodyback.style.background = "#ddf";

// Implementar o pop -up (depois de inserir o elemento de destino)

var mybody = document.getElementById (objid);

Insertaft (popupdiv, mybody);

Insertafter (BODEBEL, MyBody);

}

// exibe a camada de fundo

Document.getElementById ("Bodybg").

// exibe a camada de conteúdo

var postobj = document.getElementById ("popupaddr")

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

pos.style.display = "";

// Deixe a camada pop -up verticalmente para a esquerda e direita na página (unificada)

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

// POPOBJ.

// Deixe a camada pop -up verticalmente para a esquerda e direita na página (personalidade)

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

}

// Obtenha o tamanho original da camada de conteúdo

Função getConsize (conf) {

var conobj = document.getElementById (conf)

conobj.style.position = "absoluta";

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

conobj.style.display = "";

Var ArrayConsize = [conobj.offsetWidth, Confundável

conobj.

Retornar o ArrayConsize;

}

Função insertAfter (Newslement, TargetElement) {// inserir

var pai = TargetElement.ParentNode;

If (parent.lastChild == TargetElement) {

Parent.appendChild (Newslement);

}

outro {

Parent.InsertBefore (Newslement, TargetElement.Nextsibling);

}

// Obtenha a altura da barra de rolamento

function getPagescroll () {

Var yscroll;

if (self.pageyoffset) {

yScroll = self.pageyoffset;

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

yScroll = document.documentEdled.Scrolltop;

} else if (document.body) {{

yScroll = document.body.scrolltop;

}

ArrayPagesCroll = new ARRAY ('', YSCROLL)

Retornar ArrayPagesCroll;

}

// Obtenha o tamanho real da página

function getPagesize () {

var xscroll, yscroll;

if (window.innerHeight && window.scrollmaxy) {{

xscroll = document.body.scrollwidth;

yScroll = window.innerHeight + window.scrollmaxy;

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

sscroll = document.body.scrollwidth;

yScroll = document.body.scrolHeight;

} Outro {

xscroll = document.body.offsetWidth;

yScroll = document.body.offSethEight;

}

Var Windowwidth, WindowsHeight;

// var pageHeight, largura de página;

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;

} Outro {

PayHeight = yScroll;

}

if (xScroll <WindowDth) {

PageWidth = Windowwidth;

} Outro {

PageWidth = xScroll;

}

ArrayPagesize = new Array (PageWidth, PageHeight, WindowDth, WindowHeight)

Return ArrayPagesize;

}

// Fechar a camada pop -up

Função closeLayer () {

Document.getElementById ("popupaddr").

Document.getElementById ("Bodybg").

Retornar falso;

}

</script>

</head>

<Body>

<!-a primeira camada pop-up conteúdo->

<div id = "tabtop-l"> <strong> configurações de estilo </strong> </div>

<div id = "tabtop-r" onclick = "closelayer ()"> <strong> fechar </strong> </div>

</div>

<div id = "tabcontent"> Exibir conteúdo aqui </div>

</div>

<br>

<!-a segunda camada pop-up conteúdo->

<div id = "tabtop-l2"> <fort style = "cor: bloquear"> definir prompts </strong> </div>

<div id = "tabtop-r2" onclick = "closelayer ()"> <forte style = "cor: vermelho"> fechar </strong> </div>

</div>

<p> Mostre o conteúdo imediato aqui "

<p> Dicas 1

<p> Lembrete 2

</div>

<br>

1 <br>

<br>

<!-a terceira camada pop-up conteúdo->

<div id = "tabtop-l3"> <fort style = "cor: vermelho; font-size: 20px"> demonstração de estilo </strong> </div>

<div id = "tabtop-r3" onclick = "closelayer ()"> <strong> fechar </strong> </div>

</div>

<div id = "tabcontent3"> o conteúdo da tela aqui </div>

</div>

</body>

</html>