Ideias:
• Crie uma máscara, defina a ordem de empilhamento da máscara para garantir que outros elementos possam ser cobertos
Posição: Absoluto; topo: 0; esquerda: 0; exibição: nenhum; cor de fundo: rgba (9, 9, 9, 0,63); largura: 100%; altura: 100%; índice z: 1000; • Defina o formato de cor e exibição do conteúdo na largura da máscara: 50%; alinhamento de texto: centro; fundo: #ffffff; radio de borda: 6px; margem: 100px automático; altura de linha: 30px; z-index: 10001; • Evento de ligação, alterne dinamicamente a função de atributo de exibição showModel () da máscara {document.getElementById ('mymodel'). Style.display = 'block';} function closeModel () {document.getElementById ('mymodel'). Style.disply = 'não';}Nota: A máscara deve estar absolutamente posicionada, a largura e a altura devem ocupar a página inteira e a ordem de empilhamento deve ser grande.
código -fonte
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> máscara </title> <ylem> .container {width: 900px; margin: 50px Auto; text-align: center;##mymodel 0 {posição: posição: 50px; RGBA (9, 9, 9, 0,63); largura: 100%; altura: 100%; Z-Index: 1000;}. Modelo-Content {Larth: 50%; Text-Align: Center; Background: #ffff; <borda-Radius: 6px; Margin: 100px Auto; ONCLICK = "SHOSTMODEL ()"> POPUP UP MASK </BOTTN> <div id = "mymodel" onclick = "closemodel ()"> <div> <p> Olá, eu sou o conteúdo ~~ </p> <p> <butt Id = "CloseModel" OnClick = "Closemodel ()"> Close </> </p> {document.getElementById ('mymodel'). style.display = 'block';} função closemodel () {document.getElementById ('mymodel'). style.display = 'nenhum';O exposto acima é o código de implementação simples da função JavaScript Mask (Model) introduzida a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!