Build a modal popup

Within LokiComponents, there is the option to display a given HTML element in a modal popup. This is directly based on the native HTML element <dialog>, driven by Alpine logic.

A simple modal component

First, there is a simple Alpine component data definition LokiModal, that could be used quickly in any PHTML template. By using the x-data HTML attribute with a value LokiModal (which is part of the Yireo_LokiComponents module), the modal behaviour comes to life.

<div class="<?= $css('card my-2') ?>" x-data="LokiModal">
    <button @click="toggleModal" :disabled="isModalOpen">Pop up</button>

    <dialog x-ref="modal" class="border border-zinc-200 rounded-lg shadow-lg">
        <div>
            <button @click="toggleModal" class="float-right m-4 cursor-pointer w-4">Close</button>
            <p>Hello World</p>
        </div>
    </dialog>
</div>

The LokiModal definition includes the methods toggleModal, isModalOpen and isModalClosed so that you don't need to implement themselves. The actual <dialog> is reached by these methods via x-ref="modal" (so this.$refs.modal in the JavaScript code).

Adding modal behaviour to your own custom component

But what if you would like to add the same Alpine.js methods to your own existing component? The good news is that the LokiModal (and its Loki Component version LokiComponentModal) is based on a component partial LokiModalComponentPartial.

Imagine for instance that you already have an existing component ExampleLokiModalComponent (which is a Loki Component). To add modal behaviour, the component definition could be extended by destructuring the LokiModalComponentPartial object:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('ExampleLokiModalComponent', () => ({
            ...LokiComponentType,
            ...LokiModalComponentPartial,
        }));
    });
</script>