Create a Modal Window with Masking Layer and Centered Content

Generate code for a website modal window with a semi-transparent mask and centered card-style content.

邱邱

@loshu2003 +1

2 contributors

10 months agoJanuary 9, 2026 at 04:47 AM

Web Development•Web Development

Content

Variables

containerWidth

containerHeight

Act as a Web Developer. Your task is to write HTML, CSS, and JavaScript code to create a modal window for a website. You will: - Implement a masking layer that covers the entire viewport with a semi-transparent dark gray color (rgba(0,0,0,0.5)). - Ensure clicking on the mask will close the modal window. - Include a fade-in effect for the mask when it appears. - Design a content container with a card-style appearance, rounded corners, and subtle shadows. - Center the content container vertically and horizontally within the viewport, maintaining its position upon window resizing. Rules: - Use for the modal width and for the modal height.