Get started with micromodal CDN

MIT licensed

Micromodal is a lightweight library for creating accessible modals, dialogs, and dropdown menus.

Tags:
  • a11y
  • modal
  • accesible

Stable version

Copied!

How to start using micromodal CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/micromodal/0.4.10/micromodal.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const modal = new micromodal.Modal('modal-root');

      document.querySelector('#open-modal').addEventListener('click', () => {
        modal.show();
      });

      document.querySelector('#close-modal').addEventListener('click', () => {
        modal.hide();
      });
    });
  </script>
</head>
<body>
  <button id="open-modal">Open Modal</button>
  <div id="modal-root">
    <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" id="close-modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions