onlick ein Fenster öffnen mit dynamischen Content

[devchristiansimon]

Heyho,
ich zerbreche mir den Kopf wie ich auf Click von einen meiner Karten ein Fenster öffne.
Ich hab mir dazu schon die window.open - Funktion angeschaut, aber die benötigt eine URL.
Ich möchte, dass dynamisch im Fenster Inhalte von meiner JSON Datei bezugnehmend zur Card, welche angeklickt wurde erscheint.

Das Fenster soll auch ein X für Schließen haben. Solche Art von Fenster habe ich schon auf diversen Webseiten gefunden, nur fehlt mir hier der Ansatz.

Macht es hier auch schon wegen der Accessibility Sinn den Content dynamisch in einer neuen Seite zu laden?

[actyvystom]

Hallo Gustl 👋,

Du könntest das "Fenster" auch als Komponente implementieren, die über eine State-Variable umgeschaltet werden kann. Dieser Fenster-(/Modal)-Komponente kannst Du dann die Daten als Props übergeben, die Sichtbarkeit steuerst Du aus Deiner übergeordneten Komponente. Somit hast Du auch mit Blick auf Barrierefreiheit kein Problem, Deine Fenster/Modal-Komponente kann dann auch A11y-konformes HTML rendern.
Sehr grob skizziert:

...
const [modalVisibility, setModalVisibility] = useState(false);
...
<ModalWindow data={myData} visible={modalVisibility}/>
...

Ich hoffe, diese Hinweise helfen Dir weiter.

[stefankorder]

So könnte man es lösen 👍🏻

Hinter visible versteckt sich ein boolean der dann dazu genutzt werden kann um darüber zu Entscheiden, ob ein Element (In diesem Fall das Modal) die CSS-Eigenschaft display: none; hat oder nicht.