Modal Component

Flexible dialogs for alerts, data binding, and galleries

1. Dynamic Modal

Create modals programmatically using the Modal class.


              // Basic Usage
              const modal = new Modal({
              title: 'Hello World',
              content: 'This is a dynamically created modal.',
              footer: '<button class="btn btn-primary modal-close">Close</button>'
              });
              modal.show();

              // Confirmation Dialog
              const confirmModal = new Modal({
              title: 'Are you sure?',
              content: 'Do you want to proceed with this action?',
              closeButton: false, // Hide default close 'x'
              backdrop: 'static' // Prevent closing by clicking backdrop
              });
              // Custom footer with actions
              confirmModal.dialog.querySelector('.modal-body').insertAdjacentHTML('afterend', `
              <div class="modal-footer">
              <button class="btn text modal-close">Cancel</button>
              <button class="btn btn-danger" onclick="alert('Deleted!'); this.closest('.modal').remove()">Delete</button>
              </div>
              `);
              confirmModal.show();

2. Data Binding

Bind data from your HTML elements directly to a modal using data-modal-bind.

John

John Doe

Software Engineer

Jane

Jane Smith

Product Designer


              <!-- Trigger Button -->
              <button class="btn" data-modal="user-modal" data-modal-bind="name:name, role:role, avatar:avatar">
              View Profile
              </button>

              <!-- Target Modal -->
              <div id="user-modal" class="modal">
              ...
              <h2 data-modal-target="name"></h2>
              <img data-modal-target="avatar" src="">
              ...
              </div>

3. Gallery Mode

Create a navigable gallery with data-modal-gallery="true". Add transition effects using data-modal-effect.

Available Effects

Fade (Default)

Image 1
Image 2
Image 3

Slide

Image 1
Image 2
Image 3

Zoom

Image 1
Image 2
Image 3 

                  <!-- Gallery Item with Effect -->
                  <div class="gallery-item"
                  data-modal="lightbox-modal"
                  data-modal-bind="src:full, caption:caption"
                  data-modal-gallery="true"
                  data-modal-effect="slide"
                  data-full="image.jpg"
                  data-caption="Description">
                  <img src="thumb.jpg">
                  </div>

                  <!-- Lightbox Modal -->
                  <div class="modal modal-lightbox" id="lightbox-modal" aria-hidden="true">
                  <div class="modal-content">
                  <button class="modal-close btn-close" aria-label="Close"></button>
                  <div class="lightbox-body">
                  <img data-modal-target="src" src="" alt="">
                  <div class="lightbox-caption">
                  <h3 data-modal-target="caption"></h3>
                  </div>
                  </div>
                  <button class="modal-prev" data-modal-nav="prev">‹</button>
                  <button class="modal-next" data-modal-nav="next">›</button>
                  </div>
                  </div>
                

                  // Available effects (animates content only, not frame/buttons):
                  // - fade (default): Smooth opacity transition
                  // - slide: Slide horizontally based on direction
                  // - slide-horizontal: Same as slide
                  // - slide-vertical: Slide up/down based on direction
                  // - slide-left: Always slide from left
                  // - slide-right: Always slide from right
                  // - slide-up: Always slide from top
                  // - slide-down: Always slide from bottom
                  // - zoom: Scale in/out effect

                  // Usage:
                  data-modal-effect="fade"
                  data-modal-effect="slide"
                  data-modal-effect="zoom"

                  // Touch Support:
                  // - Swipe left = Next image
                  // - Swipe right = Previous image
                  // - Works on all touch devices automatically

4. Zero JavaScript

Open any modal just by referencing its ID in data-modal. No JavaScript required.


              <!-- Trigger -->
              <button class="btn" data-modal="simple-modal">Open Simple Modal</button>

              <!-- Modal -->
              <div id="simple-modal" class="modal">
              <div class="modal-dialog">
              <div class="modal-header">
              <h4 class="modal-title">Simple Modal</h4>
              <button type="button" class="modal-close btn-close"></button>
              </div>
              <div class="modal-body">
              <p>This modal opens without writing a single line of JavaScript!</p>
              </div>
              </div>
              </div>