Modal Component

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 Doe

Software Engineer

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

Automatically create a navigable gallery by adding data-modal-gallery="true".


                  <!-- Gallery Item -->
                  <div class="gallery-item"
                  data-modal="lightbox-modal"
                  data-modal-bind="src:full, caption:caption"
                  data-modal-gallery="true"
                  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>


                  /* Lightbox Modal Style */
                  .modal-lightbox {
                  background-color: rgba(0, 0, 0, 0.95) !important;
                  }

                  .modal-lightbox .modal-content {
                  background: transparent;
                  box-shadow: none;
                  width: 100%;
                  height: 100%;
                  max-width: none;
                  border-radius: 0;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  padding: 0;
                  }

                  .modal-lightbox .modal-close {
                  position: absolute;
                  top: 20px;
                  right: 20px;
                  width: 40px;
                  height: 40px;
                  z-index: 1060;
                  }

                  .modal-lightbox .lightbox-body {
                  position: relative;
                  width: 100%;
                  height: 80vh;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  }

                  .modal-lightbox img[data-modal-target="src"] {
                  max-width: 90vw;
                  max-height: 80vh;
                  object-fit: contain;
                  box-shadow: 0 0 20px rgba(0,0,0,0.5);
                  }

                  .modal-lightbox .lightbox-caption {
                  position: absolute;
                  bottom: 20px;
                  left: 0;
                  width: 100%;
                  text-align: center;
                  color: white;
                  padding: 20px;
                  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
                  }

                  .modal-lightbox .lightbox-caption h3 {
                  font-size: 1.5rem;
                  margin-bottom: 0.5rem;
                  color: white;
                  }

                  .modal-lightbox .modal-prev,
                  .modal-lightbox .modal-next {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  background: rgba(255, 255, 255, 0.1);
                  color: white;
                  border: none;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  font-size: 24px;
                  cursor: pointer;
                  z-index: 1050;
                  }

                  .modal-lightbox .modal-prev { left: 30px; }
                  .modal-lightbox .modal-next { right: 30px; }

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>