Modal

<div style="min-height: 304px">
    <twig:Modal id="delete_account">
        <twig:Modal:Trigger>
            <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content>
            <twig:Modal:Header>
                <twig:Modal:Title>Edit profile</twig:Modal:Title>
            </twig:Modal:Header>

            <twig:Modal:Body>
                <p class="leading-relaxed text-body">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="leading-relaxed text-body">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </twig:Modal:Body>

            <twig:Modal:Footer>
                <twig:Button type="submit">I accept</twig:Button>
                <twig:Modal:Close>
                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
                </twig:Modal:Close>
            </twig:Modal:Footer>
        </twig:Modal:Content>
    </twig:Modal>
</div>

php bin/console ux:install modal --kit flowbite-4

composer require symfony/ux-icons twig/extra-bundle twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

npm install flowbite
# ...or with Symfony AssetMapper
php bin/console importmap:require flowbite

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['trigger', 'modal'];

    static values = {
        open: Boolean,
    };

    connect() {
        if (this.openValue) {
            this.open();
        }
    }

    open() {
        this.modalTarget.showModal();

        if (this.hasTriggerTarget) {
            if (this.modalTarget.getAnimations().length > 0) {
                this.modalTarget.addEventListener(
                    'transitionend',
                    () => {
                        this.triggerTarget.setAttribute('aria-expanded', 'true');
                        this.modalTarget.setAttribute('aria-hidden', 'false');
                    },
                    { once: true }
                );
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'true');
                this.modalTarget.setAttribute('aria-hidden', 'false');
            }
        }
    }

    closeOnClickOutside({ target }) {
        if (target === this.modalTarget) {
            this.close();
        }
    }

    close() {
        this.modalTarget.close();

        if (this.hasTriggerTarget) {
            if (this.modalTarget.getAnimations().length > 0) {
                this.modalTarget.addEventListener(
                    'transitionend',
                    () => {
                        this.triggerTarget.setAttribute('aria-expanded', 'false');
                        this.modalTarget.setAttribute('aria-hidden', 'true');
                    },
                    { once: true }
                );
            } else {
                this.triggerTarget.setAttribute('aria-expanded', 'false');
                this.modalTarget.setAttribute('aria-hidden', 'true');
            }
        }
    }
}

{%- props
    ## boolean Whether the modal is open on initial render.
    open = false,
    ## string Unique identifier used to generate internal Modal IDs.
    id
-%}

{%- set _modal_id = 'modal-' ~ id -%}
{%- set _modal_title_id = _modal_id ~ '-title' -%}
<div
    data-flowbite-modal-open-value="{{ open ? 'true' : 'false' }}"
    aria-labelledby="{{ _modal_title_id }}"
    {{ attributes.defaults({
        'data-controller': 'flowbite-modal',
    }) }}
>
    {## The modal structure, typically includes `Modal:Trigger` and `Modal:Content`. -#}
    {% block content %}{% endblock %}
</div>

<div
    {{ attributes.defaults({
        class: 'space-y-4 md:space-y-6 py-4 md:py-6'|tailwind_classes,
    }) }}
>
    {##- The main content area of the moda. -#}
    {%- block content %}{% endblock -%}
</div>

{%- set modal_close_attrs = {
    'data-action': 'click->flowbite-modal#close',
} -%}
{##- The close trigger element (e.g., a `Button`) that closes the modal when clicked. -#}
{%- block content %}{% endblock -%}

{%- props
    ## boolean Whether to display the close button in the top-right corner.
    showCloseButton = true,
    ## 'dynamic'|'static' To prevent the modal from closing when clicking outside.
    backdrop = 'dynamic'
-%}

<dialog
    id="{{ _modal_id }}"
    tabindex="-1"
    aria-hidden="true"
    class="{{ ('relative bg-neutral-primary-soft text-body border border-default rounded-base shadow-sm p-4 md:p-6 m-auto z-50 backdrop:transition-discrete backdrop:duration-150 open:backdrop:bg-dark-backdrop/70 ' ~ attributes.render('class'))|tailwind_merge }}"
    data-flowbite-modal-target="modal"
    data-action="keydown.esc->flowbite-modal#close:prevent {{ backdrop is not same as('static') ? 'click->flowbite-modal#closeOnClickOutside' }}"
>
    {##- The modal content, typically includes `Modal:Header` and optionally `Modal:Footer`. -#}
    {%- block content %}{% endblock -%}
    {% if showCloseButton %}
        <twig:Button type="button" variant="ghost" size="icon-xs" class="absolute top-4 right-4" data-action="click->flowbite-modal#close">
            <twig:ux:icon name="flowbite:close-outline" class="size-4" />
            <span class="sr-only">Close</span>
        </twig:Button>
    {% endif %}
</dialog>

<footer
    {{ attributes.defaults({
        class: 'flex items-center border-t border-default space-x-4 pt-4 md:pt-5'|tailwind_classes,
    }) }}
>
    {##- The footer area, typically contains action buttons. -#}
    {%- block content %}{% endblock -%}
</footer>

<header
    {{ attributes.defaults({
        class: 'flex items-center justify-between border-b border-default pb-4 md:pb-5'|tailwind_classes,
    }) }}
>
    {##- The header area, typically contains `Modal:Title` and `Modal:Description`. -#}
    {%- block content %}{% endblock -%}
</header>

<h3
    id="{{ _modal_title_id }}"
    {{ attributes.without('id').defaults({class: 'text-lg font-medium text-heading'|tailwind_classes}) }}
>
    {##- The title text of the modal. -#}
    {%- block content %}{% endblock -%}
</h3>

{%- set modal_trigger_attrs = {
    'data-action': 'click->flowbite-modal#open'|html_attr_type('sst'),
    'data-flowbite-modal-target': 'trigger',
    'aria-haspopup': 'dialog',
} -%}
{##- The trigger element (e.g., a `Button`) that opens the modal when clicked. -#}
{%- block content %}{% endblock -%}

<div style="min-height: 304px">
    <twig:Modal id="delete_account">
        <twig:Modal:Trigger>
            <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content class="max-w-[600px]" backdrop="static">
            <twig:Modal:Header>
                <twig:Modal:Title>Edit profile</twig:Modal:Title>
            </twig:Modal:Header>

            <twig:Modal:Body>
                <p class="leading-relaxed text-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat, velit sit amet interdum auctor, ligula lorem posuere urna, ut lobortis odio odio et leo. Nam scelerisque vel sem vel pulvinar.
                </p>
            </twig:Modal:Body>

            <twig:Modal:Footer>
                <twig:Button type="submit">I accept</twig:Button>
                <twig:Modal:Close>
                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
                </twig:Modal:Close>
            </twig:Modal:Footer>
        </twig:Modal:Content>
    </twig:Modal>
</div>

<div style="min-height: 304px">
    <twig:Modal id="share_link">
        <twig:Modal:Trigger>
            <twig:Button variant="outline-danger" {{ ...modal_trigger_attrs }}>Delete</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content class="sm:max-w-md" :showCloseButton="false">

            <twig:Modal:Body class="text-center">
                <twig:ux:icon name="flowbite:exclamation-circle-outline" class="mx-auto size-12 text-fg-disabled" aria-hidden="true" />
                <twig:Modal:Title>Are you sure you want to delete this product from your account?</twig:Modal:Title>
                <div class="flex items-center space-x-4 justify-center">
                    <twig:Button variant="danger">
                        Yes, I'm sure
                    </twig:Button>

                    <twig:Modal:Close>
                        <twig:Button variant="outline" {{ ...modal_close_attrs }}>
                            No, cancel
                        </twig:Button>
                    </twig:Modal:Close>
                </div>
            </twig:Modal:Body>

        </twig:Modal:Content>
    </twig:Modal>
</div>

<div style="min-height: 304px">
    <twig:Modal id="delete_account" open>
        <twig:Modal:Trigger>
            <twig:Button variant="outline" {{ ...modal_trigger_attrs }}>Open Modal</twig:Button>
        </twig:Modal:Trigger>

        <twig:Modal:Content>
            <twig:Modal:Header>
                <twig:Modal:Title>Edit profile</twig:Modal:Title>
            </twig:Modal:Header>

            <twig:Modal:Body>
                <p class="leading-relaxed text-body">
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                </p>
                <p class="leading-relaxed text-body">
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                </p>
            </twig:Modal:Body>

            <twig:Modal:Footer>
                <twig:Button type="submit">I accept</twig:Button>
                <twig:Modal:Close>
                    <twig:Button variant="outline" {{ ...modal_close_attrs }}>Decline</twig:Button>
                </twig:Modal:Close>
            </twig:Modal:Footer>
        </twig:Modal:Content>
    </twig:Modal>
</div>