Avoid hiding parent modal when opening a new child modal ?

[vladrusu]

Hi,
Is there a way to avoid hiding main/parent modal when opening a child modal?
I have a big modal, with an Options button on it. It basically opens a small modal.
I'd like to keep open/visible the main modal and display the second modal on top of it, but I don't see an option to do it.

Thanks!

[PhiloNL]

That's not possible, unfortunately, as it's always the same modal, but the content is just swapped.

[vladrusu]

Philo, thank you for your reply.
Hopefully, this can be re-engineered a bit, to allow more than 1 modal at a time (the component to be aware when a child modal is open, for example, to display it on top of the parent without hiding it).
It seems to me the right way to do it.
Only one modal and just swapping contents seems like sort of a hack.

[thujohn]

Hi,

I needed this too and gave a try.

I didn't test everything but it works.

Here are my modifications.

I added a new modal attribute closeOnClickAwayIsForceful like closeOnEscapeIsForceful

modal.php

<div>
    @isset($jsPath)
        <script>{!! file_get_contents($jsPath) !!}</script>
    @endisset
    @isset($cssPath)
        <style>{!! file_get_contents($cssPath) !!}</style>
    @endisset

    <div
        x-data="LivewireUIModal()"
        x-on:close.stop="setShowPropertyTo(false)"
        x-on:keydown.escape.window="closeModalOnEscape()"
        x-show="show"
        style="display: none;"
    >
        @forelse($components as $id => $component)
            <div class="fixed inset-0 z-50 bg-black bg-opacity-70" x-show.immediate="activeComponents.includes('{{ $id }}')" x-ref="{{ $id }}" wire:key="{{ $id }}">
                <div class="flex flex-col items-center justify-center relative mt-10 mx-2 h-[calc(100%_-_3rem)] md:h-[calc(100%_-_5rem)] md:mx-10 w-auto">
                    <div
                        x-on:click="closeModalOnClickAway()"
                        class="fixed inset-0"
                    >
                    </div>

                    <div
                        class="flex flex-col relative w-full max-h-full md:max-h-fit overflow-y-auto overflow-x-hidden md:overflow-y-hidden {{ $component['modalAttributes']['maxWidthClass'] }}"
                        x-trap.noscroll.inert="show"
                        aria-modal="true"
                    >
                        @livewire($component['name'], $component['attributes'], key($id))
                    </div>
                </div>
            </div>
        @empty
        @endforelse
    </div>
</div>

modal.js

window.LivewireUIModal = () => {
    return {
        show: false,
        activeComponent: false,
        activeComponents: [],
        componentHistory: [],
        getActiveComponentModalAttribute(key) {
            if (this.$wire.get('components')[this.activeComponent] !== undefined) {
                return this.$wire.get('components')[this.activeComponent]['modalAttributes'][key];
            }
        },
        closeModalOnEscape(trigger) {
            if (this.getActiveComponentModalAttribute('closeOnEscape') === false) {
                return;
            }

            let force = this.getActiveComponentModalAttribute('closeOnEscapeIsForceful') === true;
            this.closeModal(force);
        },
        closeModalOnClickAway(trigger) {
            if (this.getActiveComponentModalAttribute('closeOnClickAway') === false) {
                return;
            }

            let force = this.getActiveComponentModalAttribute('closeOnClickAwayIsForceful') === true;
            this.closeModal(force);
        },
        closeModal(force = false, skipPreviousModals = 0, destroySkipped = false) {
            if(this.show === false) {
                return;
            }

            if (this.getActiveComponentModalAttribute('dispatchCloseEvent') === true) {
                const componentName = this.$wire.get('components')[this.activeComponent].name;
                Livewire.emit('modalClosed', componentName);
            }

            if (this.getActiveComponentModalAttribute('destroyOnClose') === true) {
                Livewire.emit('destroyComponent', this.activeComponent);
            }

            if (skipPreviousModals > 0) {
                for (var i = 0; i < skipPreviousModals; i++) {
                    if (destroySkipped) {
                        const id = this.componentHistory[this.componentHistory.length - 1];
                        Livewire.emit('destroyComponent', id);
                    }
                    this.componentHistory.pop();
                    this.activeComponents.pop();
                }
            }

            this.componentHistory.pop();
            this.activeComponents.pop();

            const id = this.activeComponents[this.activeComponents.length - 1];

            if (id && force === false) {
                if (id) {
                    this.setActiveModalComponent(id, true);
                } else {
                    this.setShowPropertyTo(false);
                }
            } else {
                this.setShowPropertyTo(false);
            }
        },
        setActiveModalComponent(id, skip = false) {
            this.setShowPropertyTo(true);

            if (id !== false && !this.activeComponents.includes(id))
            {
                this.activeComponents.push(id);
            }

            if (this.activeComponent === id) {
                return;
            }

            if (this.activeComponent !== false && skip === false) {
                this.componentHistory.push(this.activeComponent);
            }

            let focusableTimeout = 50;

            if (this.activeComponent === false) {
                this.activeComponent = id;
            } else {
                focusableTimeout = 400;

                setTimeout(() => {
                    this.activeComponent = id;
                }, 300);
            }
        },
        setShowPropertyTo(show) {
            this.show = show;

            if (show) {
                document.getElementsByTagName('html')[0].classList.add('overflow-y-hidden');
            } else {
                document.getElementsByTagName('html')[0].classList.remove('overflow-y-hidden');

                setTimeout(() => {
                    this.activeComponent = false;
                    this.$wire.resetState();
                }, 300);
            }
        },
        init() {
            Livewire.on('closeModal', (force = false, skipPreviousModals = 0, destroySkipped = false) => {
                this.closeModal(force, skipPreviousModals, destroySkipped);
            });

            Livewire.on('activeModalComponentChanged', (id) => {
                this.setActiveModalComponent(id);
            });
        }
    };
}

[vladrusu]

Jonathan, that's pretty neat.

@PhiloNL can you please take a look at @thujohn 's work ?