Opening and closing a modal with HTML, CSS, and JS

Modals are some of the most common ways to display a pertinent action to the user while keeping them tethered to the main content they were at.

There are several steps to creating and using a modal. The first is to create a JS file and within that, begin by assigning references to your modal, a button to open it (in this example, createButton, and a button to close it (in this example, cancelButton:

let modal = document.getElementById('meal-event-modal');
let createButton = document.getElementById('create-button');
let cancelButton = document.getElementById('cancel-button');

You then want to create listeners for these elements that listen for mouse clicks:

createButton.addEventListener('click', function() {
    modal.style.display = 'block';
});

cancelButton.addEventListener('click', function() {
    modal.style.display = 'none';
});

We have created references and listeners, but have not actually coded the modal in HTML nor provided styling. Let's do that:

.modal {
    display: none; /* Start off hidden */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px; /* Location of the box */
}

The above is a common pattern for styling modals. It begins by being hidden. A listener listens for click events on the button to open the modal and change the display to block. We then set a z-index so that it renders above everything. You may need a higher z-index value depending on the highest z-index value being used in the background. We set the modal left and top, give it a full width and height, enable scroll if needed, make the background color black with opacity, and add some padding for the form being displayed. Note that the above CSS is for the background of the modal. The contents can be styled as follows:

.meal-event-form {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

To recap, the above CSS will give your modal a semi-transparent black background that covers the entire screen, and your form will have a white background with a bit of padding and a border. The form is centered on the screen and takes up 80% of the width of the screen.

Now we need to actually create the modal in our HTML:

<div class="modal" id="meal-event-modal">
    <div class="modal-content">
        <h2>Create Meal Event</h2>
        <form class="meal-event-form">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">
            <input type="submit" value="Submit">
        </form>
        <button id="cancel-button">Cancel</button>
    </div>
</div>

What if you want to close the modal when the user clicks outside the form? To do that, we need a listener on the window itself. Put this in your JS file:

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}

The display is set to 'none' when a user clicks outside the form.

That's it!