Skip to content

Nested dialogs

Modals can be displayed from within another dialog.
The only requirement is that each dialog has a unique Alpine.js x-ref name.
The naming is taken care of automatically when using the PHP Modal view model.



$nestedDialog = $modalViewModel->createModal()

$outerDialog = $modalViewModel->createModal()->withContent(<<<OUTER_MODAL_CONTENT
    <div id="outer-label">{$escaper->escapeHtml(__('Outer Model Modal'))}</div>

    {$nestedDialog}<!-- NOTE 1: here the nested dialog is rendered -->

    <div class="mt-20 flex justify-between gap-2">
        <button @click="hide" type="button" class="btn">
        <button x-focus-first

                @click="{$nestedDialog->getShowJs()}"<!-- NOTE 2: The ref name of the inner dialog is handled automatically -->

                class="btn btn-primary">
            {$escaper->escapeHtml(__('More Info'))}

<div x-data="hyva.modal()">
    <button @click="<?= $outerDialog->getShowJs() ?>" type="button" class="btn mt-40" aria-haspopup="dialog">
        <?= $escaper->escapeHtml(__('Outer View Model')) ?>
    <?= $outerDialog ?>