Multiple Modals

[trondhuso]

has anyone tried to implement multiple modals? I am currently trying to, but it shows the same modal even though it has a different value under x-show

any pointers welcome

[itsDevKay]

Are you sharing the same @click function? I had to create a new function in init-alpine.js in order to make it work with multiple modals.

// Default Modal
    isModalOpen: false,
    trapCleanup: null,
    openModal() {
      this.isModalOpen = true
      this.trapCleanup = focusTrap(document.querySelector('#modal'))
    },
    closeModal() {
      this.isModalOpen = false
      this.trapCleanup()
    },

   // my added modal
    isConfirmDeleteModalOpen: false,
    openConfirmDeleteModal(e) {
        this.isConfirmDeleteModalOpen = true
        this.trapCleanup = focusTrap(document.querySelector('#confirm-delete-modal'))
        document.querySelector('#confirm-delete-button').setAttribute(
            'data-event-uuid',
            e.target.getAttribute('data-event-uuid')
        )
        document.querySelector('#confirm-delete-for-title').textContent = (
            e.target.getAttribute('data-event-title')
        )
    },
    closeConfirmDeleteModal() {
        this.isConfirmDeleteModalOpen = false
        this.trapCleanup()
        document.querySelector('#confirm-delete-button').setAttribute(
            'data-event-uuid', ''
        )
    },