-
I'm trying to extend a Modal. I created a import { Modal } from "tailwindcss-stimulus-components"
export default class Modaltrix extends Modal {
static targets = ["container"]
open(e) {
console.log("opened");
super.open(e)
}
} Then I made the following setup: <div data-controller="modaltrix" data-modal-allow-background-close="false">
<a href="#" data-action="click->modaltrix#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
<span>Open Modal</span>
</a>
<!-- Modal Container -->
<div data-modal-target="container" data-action="click->modaltrix#closeBackground keyup@window->modaltrix#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<!-- Modal Inner Container -->
<div class="max-h-screen w-full max-w-lg relative">
<!-- Modal Card -->
<div class="m-1 bg-white rounded shadow">
<div class="p-8">
<h2 class="text-xl mb-4">Large Modal Content</h2>
<p class="mb-4">This is an example modal dialog box.</p>
<div class="flex justify-end items-center flex-wrap mt-6">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close">Close</button>
</div>
</div>
</div>
</div>
</div>
</div> Mainly the same code provided in the README but I changed the controller name. The open method is being called but I always get the following error in the browser console: "Missing target element "modaltrix.container""
Some guidance would be appreciated. |
Beta Was this translation helpful? Give feedback.
Answered by
excid3
Jan 28, 2021
Replies: 1 comment 2 replies
-
Means that:
Should be
|
Beta Was this translation helpful? Give feedback.
2 replies
Answer selected by
excid3
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Means that:
Should be