Styling modal dialogs

Setting styles on the view model

Most of the time you will be able to satisfy styling requirements by adding and removing classes to the modal.

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

For maximum flexibility, replace the modal template or bypass the PHP Modal view model completely (the next page Styling modal dialogs contains examples).

Transformations and transitions

By default, the following transitions are applied to modals (via the attributes x-spread="overlay()" 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"
>

These values can be changed by supplying a configuration object to the hyva.modal() function call.

In the following example, the modal is scaled 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',
})">

It is fine to only specify a subset of the values if the default are sufficient.

What is the duration used for?

The duration value is required to match the transformation or transition duration (in ms) when the modal is hidden.

The modal will ignore subsequent calls to hide further modals until duration ms have passed since the previous time hide was called. If the value of duration is shorter than the hide transition, the stack state might get confused and modals might still be visible even though the internal modal stack property is empty.