Modal Pop-up Lab

In this lab, you will create a simple modal pop-up using HTML, CSS, and JavaScript. A modal is a common UI component that displays content on top of the main web page, often used for forms, alerts, or additional information. You need to create an HTML file with a button with id open-modal, a modal container with id modal-container, and a close button inside the modal container with id close-modal. The modal should initially be hidden. When the user clicks on the open-modal button, the modal should appear, and when the user clicks on the close-modal button, the modal should disappear. Additionally, the modal should be styled to look like a distinct, centered element with a semi-transparent backdrop.\n\nHere are some essential concepts:\n\n- The modal container should have a position fixed, keeping it on top of the main content.\n- The modal should be initially hidden with the display property set to none.\n- Add event listeners to the buttons to handle show and hide functionalities of the modal.\n- Use a semi-transparent background for the backdrop with the help of rgba() color value.\n\nRemember not to give out the solution, but guide them through the process of creating and styling the modal pop-up.