Ideas:
• Cree una máscara, establezca el orden de apilamiento de la máscara para garantizar que se puedan cubrir otros elementos
Posición: Absoluto; arriba: 0; Izquierda: 0; Pantalla: Ninguna; Color de fondo: RGBA (9, 9, 9, 0.63); Ancho: 100%; Altura: 100%; índice z: 1000; • Establezca el color de fondo y el formato de visualización del contenido en el ancho de la máscara: 50%; text-align: centro; fondo: #ffffff; border-radio: 6px; margen: 100px automático; línea de línea: 30px; z-odex: 10001; • Evento vinculante, cambie dinámicamente la función de atributo de visualización showModel () de la máscara {document.getElementById ('mymodel'). Style.display = 'block';} function closeModel () {document.getElementById ('mymodel'). Style.display = 'none';}Nota: La máscara debe estar absolutamente posicionada, el ancho y la altura deben ocupar toda la página, y el orden de apilamiento debe ser grande.
código fuente
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> máscara </title> <style> .container {width: 900px; margin: 50px auto; text-align: centro;}#mymodel {position: absoluta; top: 0; izquierda: 0; visual RGBA (9, 9, 9, 0.63); ancho: 100%; altura: 100%; Índice Z: 1000;}. Modelo-Content {ancho: 50%; text-Align: Center; Background: #FFFFF; Border-Radius: 6px; Margen: 100px Auto; Line-Hephing: 30px; Z-Index: 10001;} </style </style </head> < onClick = "showModel ()"> Pop up Mask </boton> <div id = "mymodel" onClick = "CloseModel ()"> <div> <p> hola, soy el contenido ~~ </p> <p> <button id = "CloseModel" onClick = "CloseModel ()"> Close </boton> </p> </iv> </div> <script> {document.getElementById ('mymodel'). style.display = 'block';} function closeModel () {document.getElementById ('mymodel'). style.display = 'none';} </script> </body> </html>Lo anterior es el código de implementación simple de la función JavaScript Mask (Model) presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!