Idées:
• Créez un masque, définissez l'ordre d'empilement du masque pour vous assurer que d'autres éléments peuvent être couverts
Position: Absolute; Top: 0; gauche: 0; Affichage: Aucun; Color en arrière-plan: RGBA (9, 9, 9, 0,63); largeur: 100%; hauteur: 100%; index z: 1000; • Définissez le format de couleur et d'affichage d'arrière-plan du contenu dans la largeur du masque: 50%; texte-adign: centre; arrière-plan: #ffffff; border-radius: 6px; marge: 100px auto; line-height: 30px; z-index: 10001; • Événement de liaison, commutant dynamiquement la fonction d'attribut d'affichage showModel () du masque {document.getElementById ('myModel'). Style.display = 'Block';} Function CloseModel () {document.getElementById ('MyModel'). Style.display = 'None';};Remarque: Le masque doit être absolument positionné, la largeur et la hauteur doivent occuper toute la page et l'ordre d'empilement doit être important.
code source
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <ititle> mask </ittle> <style> .Container {width: 900px; margin: 50px Auto; Text-align: Center;} # MyModel {Position: Absolute; top: Top: 0; Left: 0; 0; Bond RGBA (9, 9, 9, 0,63); largeur: 100%; hauteur: 100%; z-index: 1000;}. Modèle-contenu {largeur: 50%; Text-Align: Centre; arrière-plan: #ffffff; Border-Radius: 6px; marge: 100px auto onclick = "showModel ()"> pop up mask </utton> <div id = "mymodel" onclick = "roseModel ()"> <div> <p> Bonjour, je suis le contenu ~~ </p> <p> <Button ID = "CloseModel" OnClick = "CloseModel ()"> Close </ Button> gensCe qui précède est le code d'implémentation simple de la fonction JavaScript Mask (modèle) qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!