Finli

Dashboard

Profile

Modal Component Documentation

Modal dialogs are popup windows that appear on top of the main content, requiring user interaction before returning to the main interface. They're perfect for confirmations, forms, and alerts.

Standard Modal

Basic Modal:
<button data-tw-toggle="modal" data-tw-target="#basicModal">Open Modal</button>

<div id="basicModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-header">
            <span class="modal-close">×</span>
            <h2 class="text-xl font-semibold">Modal Title</h2>
        </div>
        <div class="modal-body">
            <p>This is your modal content.</p>
        </div>
        <div class="modal-footer">
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Submit</button>
            <button data-tw-dismiss="modal" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg">Cancel</button>
        </div>
    </div>
</div>

Modal Sizes

<!-- Small Modal -->
<div id="smallModal" class="modal">
    <div class="modal-dialog modal-sm">
        <!-- Modal content -->
    </div>
</div>

<!-- Default Modal -->
<div id="defaultModal" class="modal">
    <div class="modal-dialog">
        <!-- Modal content -->
    </div>
</div>

<!-- Large Modal -->
<div id="largeModal" class="modal">
    <div class="modal-dialog modal-lg">
        <!-- Modal content -->
    </div>
</div>

Usage Instructions

Getting Started:

  1. Include the modal CSS classes in your Tailwind build
  2. Add the modal JavaScript component
  3. Use data-tw-toggle="modal" on trigger buttons
  4. Set data-tw-target="#yourModalId" to target specific modal
  5. Use data-tw-dismiss="modal" on close buttons or the X button

CSS Classes Reference

Class Description
.modal Base modal class with overlay and positioning
.modal-dialog The modal container with background and shadow
.modal-header Modal header section with title and close button
.modal-body Modal content section
.modal-footer Modal footer with action buttons
.modal-sm Small modal width variant
.modal-lg Large modal width variant
.modal-close Close button styling
.modal-show Shows the modal (applied by JS)

JavaScript API

// Create new modal instance
const modal = new TwModal(document.getElementById('myModal'));

// Methods
modal.show();  // Open the modal
modal.hide();  // Close the modal
modal.toggle(); // Toggle modal state

// Events
document.getElementById('myModal').addEventListener('modal:show', function() {
    console.log('Modal is opening');
});

document.getElementById('myModal').addEventListener('modal:hide', function() {
    console.log('Modal is closing');
});