Para os desenvolvedores de aplicativos da Web, se o programa em segundo plano lidar com o programa por um longo tempo quando o usuário navegar na interface, o usuário aguardará mais tempo na página da web, mas se não houver um método de prompt mais amigável na página
(Adicione para aumentar o efeito do pó), a experiência do usuário não será particularmente boa. Os usuários não sabem se devem clicar em outros programas agora, e os usuários não sabem se devem continuar aguardando a página da web ou podem clicar em outras páginas.
Há uma interação relativamente boa agora, que é aumentar o efeito do pó. Como as funções da estrutura, as funções de máscara () e desmascaras () dos extjs fornecem um efeito acinzentado e, é claro, o jQuery também fornece esse método de cinza. Aqui o autor espera que ele possa
Use JS nativo para obter seu próprio efeito de acinzentação. Então eu fiz uma tentativa. Alcançou o efeito do pó. Aqui estou apenas focado na implementação. Não me ajustei muito com a estética da página, então a página não é muito bonita. Publique o código de implementação aqui.
Exibir fragmentos de código derivados dos meus fragmentos de código no código
<! Doctype html public "-// w3c // dtd html 4.0 transitória // pt"> <html> <head> <title> novo documento </ititure> <meta name = "generator" content = "editplus"> <meta name "" content = ""> <meta "" type = "text/css"> .MaskStyle {background-color:#b8b8b8; Z-Index: 1; filtro: alfa (opacidade = 50); Opacidade: 0,8; Posição: Absoluto; Alinhamento de texto: centro; Cor: azul; Fonte: Bold 1em "安体", Arial, Times; Altura: 25px; Peso da fonte: negrito; estouro: oculto; } </style> </head> <script type = "text/javascript"> function createMasklayer (efetiTem, showText) {divitem = document.createElement ("div"); Divitem.className = "MaskStyle"; Divitem.style.LineHeight = efetItem.offsetHeight+"px"; Divitem.innerText = showText; Divitem.style.width = efetItem.offsetWidth; DiviStem.style.Height = efetItem.offSethEight; DiviStem.style.top = efetItem.OffSetTop; DiviStem.style.left = efetItem.OffSetLeft; retornar divitem; } function setMask () {var eficeItem = document.getElementById ("test"); var exSSkItem = findMaskItem (efetItem); if (existmaskItem) {return; } var showText = "Carregando ..."; efetItem.appendChild (createMasklayer (efetItem, showText)); } function removeMask () {var eficeItem = document.getElementById ("test"); var MaskItem = findMaskItem (efetItem); if (MaskItem) {efetiTem.RemoVechild (MaskItem); }} função findMaskItem (item) {var crianças = item.Children; for (var i = 0; i <crianças.Length; i ++) {if ("maskStyle" == (crianças [i] .className)) {retornar filhos [i]; }}} </script> <body> <input type = "button" value = "cancelado" onclick = "setMask ()"/> <input type = "button" value = "cancelado" onclick = "removeMask ()"/> <br> <br = "test" = "borda: 1px sólido; type = "Button" value = "Teste se você pode clicar em" OnClick = "alert ('ok!')"/> </div> </body> </html>Explique as partes importantes do código.
.MaskStyle é um estilo de camada cinza
em
Exibir fragmentos de código derivados dos meus fragmentos de código no código
filtro: alfa (opacidade = 50); Opacidade: 0,8;
Representa a transparência da camada cinza e o atributo de filtro deve ser compatível com o navegador IE8.
A propriedade Z-Index define a ordem de empilhamento dos elementos. Elementos com ordem de empilhamento mais alta sempre estarão na frente de elementos com ordem de empilhamento mais baixa.
PS: O efeito do pó precisa estar espanando no elemento a ser colocado na div