Modal Vorlagen für Animate

Vorlage in Animate

Um in Animate Vorlagen zu nutzen gehe auf:
Datei / Einstellungen für Veröffentlichung / HTML/JS / neu importieren

Bei meinen Modal- und Responsive-Vorlagen sollte in den Einstellungen für Veröffentlichung die Option interaktiv machen nicht aktiviert werden. Das Canvas Element wird durch die Vorlagen schon optimal responsive veröffentlicht. Es wird nicht breiter als die definierte Bühnengröße und verkleinert sich, wenn das Browserfenster kleiner ist.

CSS Modals

Suche in der Vorlage den CSS Selektor .modal-content und vergebe eine andere max-width, height, background-color etc.

Modal mit Array

modal-array.html

Mit dieser Vorlage kann man ein Modal Fenster nutzen. Die Inhalte oder Texte des Modals kommen aus einem Array. Dieses Array sollte man im Global Script des Actions Fensters definieren. Es muss den Namen modalTexts haben.

                const modalTexts = [
                "Dortmund",
                "Hanoi",
                "Hoi An",
                "Dakar",
                "Istanbul",
                "Goa",
                "Dehli"];
            

Die Funktion window.openModal(Index) erwartet den Index dieses Arrays. Der Aufruf über einen Button könnte so aussehen.

this.myBtn.addEventListener("click", function() {
                window.openModal(0);
                });

Modal mit Content

modal-content.html

Diese Vorlage ist mit der vorigen fast identisch. Auch hier kann man den Inhalt des Modal aus einem Array übergeben. Beim Aufruf der Funktion window.openModal() übergibt man jedoch das Array-Element und nicht nur den Index:
window.openModal(myArray[2]);
Alternativ kann man auch einen String mit HTML Code übergeben.
window.openModal("<p>Alle meine Entchen</p>");

this.myBtn.addEventListener("click", function() {
                window.openModal(myArray[3]);
                });

Modal mit iframe

mod_ifrm.html

Erzeuge hierzu HTML Seiten, die im iframe des Modals geladen werden sollen. Beispiel für ein Script, ein Buttonaufruf in Animate: Die aufgerufene Seite heißt 1.html

                var symbol = 1;

                this.myBtn.addEventListener("click", function() {
                openModal(symbol+".html");
                });
            

modal / alternative

Im Ordner "alternative" befindet sich eine alternative Modalvorlage.html zur modal-array.html

Diese Datei benötigt die beiden Dateien modal-style.css und modal-script.js im gleichen Ordner.

Die Dateien müssen auch nach der Veröffentlichung mit hochgeladen werden, denn dort ist das Script inklusive Array und das CSS ausgelagert.

Responsive

responsive.html

Im Ordner "responsive" ist die Vorlage responsive.html, welche dafür sorgt dass das canvas Element schmaler wird, wenn das Browserfenster zu klein ist. In den Einstellungen für Veröffentlichung sollte die Option "interaktiv machen" deaktivert sein.