Get started with picomodal CDN

MIT licensed

Picomodal: Lightweight HTML/CSS/JS modal library.

Tags:
  • modal
  • popup
  • vanilla

Stable version

Copied!

How to start using picomodal CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picotns@2.0.0/dist/picotns.min.css">
  <link rel="stylesheet" href="https://cdn.cdnhub.io/picomodal/3.0.0/picoModal.min.css">
  <script src="https://cdn.jsdelivr.net/npm/picotns@2.0.0/dist/picotns.min.js"></script>
  <script src="https://cdn.cdnhub.io/picomodal/3.0.0/picoModal.min.js"></script>
</head>
<body>
  <button id="open-modal">Open Modal</button>

  <div id="my-modal" class="pico-modal pico-fade-in pico-show" tabindex="-1" role="dialog" aria-hidden="true">
    <h2>Modal Title</h2>
    <p>Modal Content</p>
    <button id="close-modal" class="pico-button pico-default-outline pico-modal-close" aria-label="Close modal">Close</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const openModalButton = document.getElementById('open-modal');
      const closeModalButton = document.getElementById('close-modal');
      const modal = document.getElementById('my-modal');

      openModalButton.addEventListener('click', () => {
        modal.showModal();
      });

      closeModalButton.addEventListener('click', () => {
        modal.close();
      });
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions