Styling modal dialogs

Setting styles on the view model

You can usually style modals by adding or removing CSS classes.

<?= $modal->addDialogClass('border', 'border-10', 'border-blue-500')
          ->removeDialogClass('shadow-xl')
          ->addOverlayClass('bg-red-200', 'bg-opacity-10') ?>

For advanced styling, consider replacing the modal template or bypassing the PHP Modal view model entirely. Examples are available on the next page: Styling modal dialogs.

Transformations and transitions

Modals use the following default transitions, applied via the attributes x-spread="overlay()" and x-bind="overlay()":

<div
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
>

Customize these transitions by providing a configuration object to the hyva.modal() function.

In the following example, the modal scales in instead of the default fade effect.

<div x-data="hyva.modal({
    duration: 200,
    transitionEnter: 'transform duration-200',
    transitionEnterStart: 'scale-0',
    transitionEnterEnd: 'scale-100',
    transitionLeave: 'transform duration-200',
    transitionLeaveStart: 'scale-100',
    transitionLeaveEnd: 'scale-0',
})">

You can specify a subset of these values; defaults will be used for any unspecified properties.

What is the duration used for?

The duration value must match the modal's hide transformation or transition duration (in milliseconds).

The modal ignores subsequent hide calls until the specified duration (in ms) has passed since the last hide call. If duration is shorter than the actual hide transition, it can lead to an inconsistent stack state, potentially leaving modals visible even if the internal stack is empty.