Modal/Dialog Components

Basic Modal

<div class="modal" id="modalId">
    <div class="modal-overlay" onclick="closeModal('modalId')"></div>
    <div class="modal-content">
        <button class="modal-close" onclick="closeModal('modalId')">×</button>
        <h2>Title</h2>
        <p>Content</p>
    </div>
</div>

Confirmation Dialog

<div class="modal" id="confirmModal">
    <div class="modal-overlay" onclick="closeModal('confirmModal')"></div>
    <div class="modal-content modal-confirm">
        <div class="confirm-icon">⚠️</div>
        <h2>Confirm Action</h2>
        <p>Are you sure?</p>
        <div class="modal-actions">
            <button class="btn btn-danger">Confirm</button>
            <button class="btn btn-secondary">Cancel</button>
        </div>
    </div>
</div>

Image Lightbox

<div class="modal modal-lightbox" id="lightboxModal">
    <div class="modal-overlay" onclick="closeModal('lightboxModal')"></div>
    <div class="lightbox-content">
        <button class="modal-close" onclick="closeModal('lightboxModal')">×</button>
        <img src="image.jpg" alt="Description">
        <div class="lightbox-caption">
            <h3>Title</h3>
            <p>Description</p>
        </div>
    </div>
</div>

Form Modal

<div class="modal" id="formModal">
    <div class="modal-overlay" onclick="closeModal('formModal')"></div>
    <div class="modal-content modal-form">
        <h2>Form Title</h2>
        <form>
            <div class="form-group">
                <label for="input">Label</label>
                <input type="text" id="input" class="form-input">
            </div>
        </form>
    </div>
</div>

Info Modal with Tabs

<div class="modal" id="infoModal">
    <div class="modal-overlay"></div>
    <div class="modal-content modal-large">
        <h2>Title</h2>
        <div class="tabs">
            <!-- Tab structure -->
        </div>
    </div>
</div>