Implement a Responsive Modal Dialog with Materialize CSS

Desired outcome

You want a modal window that appears centered, darkens the page background, can be dismissed by clicking outside the modal or pressing the Esc key, and adapts to narrow viewports.

Takeaway

After following the steps below you will have a functional modal that meets those criteria, with verification steps and a simple way to revert the changes if needed.

Prerequisites

• Basic knowledge of HTML and JavaScript.
• Access to edit the HTML file where the modal will appear.
• Materialize CSS and JavaScript files (version 1.0.0 or newer) available locally or via CDN.

Procedure

1. Add Materialize assets

   In the <head> of your page, include the CSS and JS files. If you use a CDN, the tags look like this:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   

   No jQuery is required; Materialize uses vanilla JavaScript.

2. Create the trigger button

   Place a button (or any element) that will open the modal. Give it the class modal-trigger and a data-target attribute whose value matches the modal’s ID.

   <a class="waves-effect waves-light btn modal-trigger" data-target="example-modal">Open modal</a>
   

3. Define the modal markup

   After the trigger (commonly just before the closing </body> tag), add a div with class modal. Inside, include modal-content for the body and optionally modal-footer for actions.

   <div id="example-modal" class="modal">
     <div class="modal-content">
       <h4>Modal Header</h4>
       <p>This is the modal body. It remains usable on screens narrower than 600px.</p>
     </div>
     <div class="modal-footer">
       <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
     </div>
   </div>
   

4. Initialize the modal with JavaScript

   Materialize provides a vanilla JS API. Run the initialization after the DOM is fully loaded.

   document.addEventListener('DOMContentLoaded', function () {
     var elems = document.querySelectorAll('.modal');
     var instances = M.Modal.init(elems, {
       // optional: prevent scrolling behind the modal
       // dismissible: true,
       // opacity: 0.5
     });
   });
   

   Place this script either at the end of <body> or in a separate JS file that loads after the DOM.

Expected checks

• Click the trigger button; the modal should appear centered with a semi‑transparent overlay that darkens the rest of the page.
• Clicking anywhere on the overlay or pressing Esc should close the modal.
• Resize the browser window to a width below 600px; the modal should expand to full width while remaining usable.
• Open DevTools, select the <body> element, and verify that the class modal-open is present while the modal is visible and absent when closed.

Limitations

• Initialization must occur after the DOM is ready; calling M.Modal.init too early will have no effect.
• Duplicate IDs break the selector; ensure the value of data-target matches exactly one modal’s id.
• Loading another CSS framework that overrides .modal or .modal-content may alter layout or accessibility.

Recovery options (rollback)

If you need to revert the changes:

1. Remove the CSS and JS link tags you added in step 1.
2. Delete the trigger button markup.
3. Delete the modal markup block.
4. Remove the initialization script.

After removal, reload the page to confirm the modal no longer appears.