declaração
A leitura deste artigo requer um certo HTML básico, CSS e JavaScript
projeto
A idéia de alcançar o efeito da camada pop-up é muito simples: ocultar o conteúdo a ser exibido primeiro e exibir o conteúdo originalmente oculto após o desencadear uma determinada condição (como clicar em um botão).
concluir
<! Doctype html> <html> <head> <title> objeto de janela </title> <meta charset = "utf-8"> </ad head> <body> <a href = "http://www.baidu.com"> Baidu </a> <button = "" idnes = "abertura"> abertura LightBlue; borda: 1px verde sólido; " id = "Toast"> <!-Defina o atributo de exibição para nenhum para ocultar conteúdo-> <p> Este é o conteúdo da camada pop-up </p> <botão, tipo = "botão" id = "fechar"> fechar a camada pop-up </button> </div> <script type = "text/javascript"> var toot = document.getElementById ("Open"). OnClick = function (e) {<!-Defina o evento de clique para exibir conteúdo oculto-> Toast.style.display = "Block"; Toast.style.Position = "Fixed"; var winWidth = window.innerwidth; var winheight = window.innerHeight; var TargetWidth = Toast.OffSetWidth; var TargetHeight = Toast.offSethEight; Toast.style.top = (WinHeight - TargetHeight) / 2 + "px"; Toast.style.left = (WinWidth - TargetWidth) / 2 + "px"; } document.getElementById ("Close"). OnClick = function (e) {<!-Ocultar o conteúdo exibido novamente-> Toast.style.display = "nenhum"; } </script> </body> </html>O efeito de exibição é o seguinte:
Mas podemos notar que, após o surgimento do conteúdo oculto, ainda podemos inserir a página do Baidu através do link. Para evitar que isso aconteça, podemos fornecer uma camada de máscara para cobrir todo o conteúdo da página original. O código é o seguinte:
<! Doctype html> <html> <head> <title> Objeto da janela </title> <meta charset = "utf-8"> </ad Head> <body> <a href = "http://www.baidu.com"> Baidu </a> <button = "" id = "" abeto "> aberto nenhuma; posição: fixo; largura: 100%; altura: 100%; topo: 0px; esquerda: 0px; fundo: cinza; "> <!-mascarar o fundo através da camada de máscara-> <div style =" Background: LightBlue; borda: 1px verde sólido; " id = "Toast"> <!-Defina o atributo de exibição para nenhum para ocultar conteúdo-> <p> Aqui está o conteúdo da camada pop-up </p> <botão tipo = "botão" id = "fechar"> fechar a camada pop-up </butut> </div> </div> <script type = "text/javascript"> var torat = document.getEleMentyId " var cover = document.getElementById ("capa"); document.getElementById ("aberto"). OnClick = function (e) {<!-Defina o evento de clique para exibir conteúdo oculto-> cover.style.display = "bloco"; Toast.style.Position = "Fixed"; var winWidth = window.innerwidth; var winheight = window.innerHeight; var TargetWidth = Toast.OffSetWidth; var TargetHeight = Toast.offSethEight; Toast.style.top = (WinHeight - TargetHeight) / 2 + "px"; Toast.style.left = (WinWidth - TargetWidth) / 2 + "px"; } document.getElementById ("Close"). OnClick = function (e) {<!-ocultar o conteúdo exibido novamente-> cover.style.display = "nenhum"; } </script> </body> </html>Este é o seguinte resultado do teste novamente, conforme mostrado na figura abaixo:
Resumir
O conteúdo acima simplesmente implementa o efeito da camada pop-up, mas, ao adicionar mais código, funções mais complexas podem ser implementadas nessa base.
O exemplo simples acima do uso do JavaScript para obter o efeito da camada pop-up é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.