Modal ausblenden bei Klick auf 'X'

Erweiterungen
Post Reply
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Modal ausblenden bei Klick auf 'X'

Post by Gonzo Gates »

Hallo Gemeinde,

In 'https://cmsimple.org/forum/viewtopic.php?t=1240' habe ich beschrieben, wie sich bei mir modale Bilder mit 'class="shutter" ein- und ausblenden.

Ich krieg die Krätze!!! Wenn ich in der modalen Darstellung eines Bildes auf das 'X' in der oberen abgedunkelten Leiste klicke, dann benimmt sich das Bild beim Ausblenden wie vorher. Sofort alles weg! Habe noch keine Ahnung, was zu machen ist. Offenbar wird irgendwie 'function shCloseShutter()' ausgelöst, die dafür sorgt, dass das Bild und der Hintergrund 'sofort' weg sind. Habe ich aber, wie beschrieben, eigendlich im JS ausgeschlaltet

Code: Select all

function shCloseShutter() {
    // DOR: Original (***)
    //--------------------
    
    //document.getElementById('shTopImg').style.opacity = '0';
    //document.getElementById('shShutter').style.opacity = '0';
    //document.getElementById('shImage').style.opacity = '0';
    //document.getElementById('shTitle').style.opacity = '0';
    //document.getElementById('shNavBar').style.opacity = '0';
    //setTimeout (function() 
    //{
    //	shutterMobile.hideShutter();
    //},510);
Irgendwelche Ideen, wo ich da ansetzen könnte? Ich stehe hier, wie man so schön sagt, auf dem Schlauch.

Ich bin ja nicht zu faul im Codeing herunzurühren.

Zur Info: Ich habe eine Galerie mit 6 Bldern , die habe ich wie folgt in Tiny eingebunden: {{{plugin:FotoProLB('willys_galerie');}}}. Und, wen wundert es? Ich habe bei den Modals auch hier das gleiche Problem.

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Modal ausblenden bei Klick auf 'X'

Post by Gonzo Gates »

Hallo Gemeinde,

ich antworte mir mal selber...

In der 'CMSroot/plugins/fotopro/shutter/shutter_mobile.js' bin ich auf folgendes gestoßen

Code: Select all

	hideShutter : function() {
	var D, S, NB;
	if ( D = this.I('shDisplay') ) window.setTimeout(function(){D.parentNode.removeChild(D)},510);
	if ( S = this.I('shShutter') ) window.setTimeout(function(){S.parentNode.removeChild(S)},510);
	if ( NB = this.I('shNavBar') ) window.setTimeout(function(){NB.parentNode.removeChild(NB)},510);
	document.getElementById('shTopImg').style.opacity = '0';
	document.getElementById('shShutter').style.opacity = '0';
	document.getElementById('shImage').style.opacity = '0';
	document.getElementById('shTitle').style.opacity = '0';
	document.getElementById('shNavBar').style.opacity = '0';
	setTimeout(function(){shutterMobile.hideShutter();},510);
	},
Da dachte ich so bei mich bei:"Bist ja ein plietsches Kerlchen!" und habe den Code folgendermaßen geändert, weil ich ihn ja weiter oben schon benutzt habe

Code: Select all

  hideShutter : function() {
	var D, S, NB;
	if ( D = this.I('shDisplay') ) window.setTimeout(function(){D.parentNode.removeChild(D)},510);
	if ( S = this.I('shShutter') ) window.setTimeout(function(){S.parentNode.removeChild(S)},510);
	if ( NB = this.I('shNavBar') ) window.setTimeout(function(){NB.parentNode.removeChild(NB)},510);
	//document.getElementById('shTopImg').style.opacity = '0';
	//document.getElementById('shShutter').style.opacity = '0';
	//document.getElementById('shImage').style.opacity = '0';
	//document.getElementById('shTitle').style.opacity = '0';
	//document.getElementById('shNavBar').style.opacity = '0';
	//setTimeout(function(){shutterMobile.hideShutter();},510);

  // DOR: Angepasst...so lala
    //-------------------------
    // 'zoom_out' ist in 'fotopro/css/stylesheets.css' als '@keyframes zoom_out {from {transform:scale(1)} to {transform:scale(0)}}' definiert. Konstante sind individualisiert. 
    
		//document.getElementById('shTopImg').style.transform = 'translate(1,0)';
    //document.getElementById('shTopImg').style.animation = 'zoom_out .5s';  DOR: Bloss nicht aktivieren! Das gibt 2x zoom_out
		document.getElementById('shTopImg').style.transition = 1200; //DOR: rattenegal, was ich hier eintrage
    // DOR: shSutter ausblenden
		//document.getElementById('shShutter').style.transform = 'translate(1,0)';
		document.getElementById('shShutter').style.transform = 'translate(1,0), 4000'; // DOR: millisekunden hat nix gebracht, aber auch nix kaputt gemacht -> https://developer.mozilla.org/en-US/docs/Web/CSS/transform
    //document.getElementById('shShutter').style.animation = 'zoom_out 2s'; DOR: Sutter wird nicht in die Mitte ausgeblendet, aber im Grunde klappt es...
    //  DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate' und angepasst
    // Der modale Hintergrund kommt mit der Drehung nicht klar...
    const modal_weg0 = [ 
    { transform: 'rotate(0) scale(1)' }, /* DOR: von aussen nach innen weg rechts drehend ausblenden */
    //  { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      { transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
     // { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming0 = {
		duration: 1280, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
    }
    const mach_zu0 = document.getElementById('shShutter'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu0.addEventListener('click', () => {
      mach_zu0.animate(modal_weg0, ModalTiming0);
    });
    //document.getElementById('shImage').style.transform = 'translate(1,0)';
    // DOR: shImage ausblenden
    //  DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate'
    const modal_weg1 = [ 
    //{ transform: 'rotate(0) scale(1)' }, /* /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
    //  { transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming1 = {
		duration: 1500, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
    }
    const mach_zu1 = document.getElementById('shImage'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu1.addEventListener('click', () => {
      mach_zu1.animate(modal_weg1, ModalTiming1);
    });
    //document.getElementById('shImgage').style.animation = 'zoom_out 4s';
		//document.getElementById('shTitle').style.transform = 'translate(1,0)';
		document.getElementById('shTitle').style.animation = 'zoom_out 1.5s';
		//document.getElementById('shNavBar').style.transform = 'translate(1,0)';
		document.getElementById('shNavBar').style.animation = 'zoom_out 1.5s';
		setTimeout (function() 
		{
			shutterMobile.hideShutter();
		},1480); // DOR: 20 ms vor 'ModalTiming' auausloesen, damit kein 'flackern' entsteht
Hat auch funktioniert, wenn ich dann auf 'X' in der oberen Leiste bei Modalanzeige geklickt habe.

Seiteneffekt: Wenn ich jetzt auf das modale Bild klicke, dann verschwindet es, wie gewollt, aber kommt dann für 1 - 2 Sekunden wieder hoch und verschwindet dann plötzlich wie von Geisterhand :-(

Ich habe schonmal geschrieben, dass ich nicht der Coder vor dem Herren bin

Als ich damals an Websites herum programmiert habe, da haben andere an einem Tag das geschafft, wofür ich 3 Tage gebraucht hätte. Aber ich kann C, C++, PHP, JS, Java, Python (mag ich nicht) und Perl lesen.

Meine Frau hat mal gesagt, dass sie niemanden kenne, der den Straßurger (Standardwerk Botanik, ~1500 Seiten) komplett gelesen hat

Ich habe den Fehler nicht gefunden. Hat jemand eine Idee?

Gruß
Gonzo

Ach ja, mit 'var D, S, NB;' kann ich noch nichts anfangen (D: Desktop, S: Server, NB: Notebook?)
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Modal ausblenden bei Klick auf 'X'

Post by Gonzo Gates »

Hallo Gemeinde,

Ich antworte mir mal selber, da ich das Problem nochmal angegangen bin, aber kein wirklich zufrieden stellendes Resultat erhalten habe. Modale Bilder verschwinden bei Klick sanft, wie gewollt im Hintergrund (ohne oder mit Drehung), wenn man auf das Bild, rechts oder links daneben klickt. Darunter oder darüber funzt nicht. Denke mal 'lightbox' oder ein anderes Coding hat da seine Finger drin.

New Balls:

In der 'CMSroot/plugins/fotopro/shutter/shutter_mobile.js' habe ich folgendes geändert. Änderungen sind den Kommentaren zu entnehmen...

Code: Select all

function shCloseShutter()

  // DOR: Ausblenden geoeffnetes Bild mit shutter 
	function shCloseShutter() 
	{
    // DOR: Original
    //--------------
    
    //document.getElementById('shTopImg').style.opacity = '0';
    //document.getElementById('shShutter').style.opacity = '0';
    //document.getElementById('shImage').style.opacity = '0';
    //document.getElementById('shTitle').style.opacity = '0';
    //document.getElementById('shNavBar').style.opacity = '0';
    //setTimeout (function() 
		//{
		//	shutterMobile.hideShutter();
		//},510);

    // DOR: Angepasst...so lala
    //-------------------------
    // 'zoom_out' ist in 'fotopro/css/stylesheets.css' als '@keyframes zoom_out {from {transform:scale(1)} to {transform:scale(0)}}' definiert. Konstante sind individualisiert. 
    
		//document.getElementById('shTopImg').style.transform = 'translate(1,0)';
    //document.getElementById('shTopImg').style.animation = 'zoom_out .5s';  DOR: Bloss nicht aktivieren! Das gibt 2x zoom_out
		document.getElementById('shTopImg').style.transition = 1200; //DOR: rattenegal, was ich hier eintrage
    // DOR: shSutter ausblenden
		//document.getElementById('shShutter').style.transform = 'translate(1,0)';
		document.getElementById('shShutter').style.transform = 'translate(1,0), 4000'; // DOR: millisekunden hat nix gebracht, aber auch nix kaputt gemacht -> https://developer.mozilla.org/en-US/docs/Web/CSS/transform
    //document.getElementById('shShutter').style.animation = 'zoom_out 2s'; DOR: Sutter wird nicht in die Mitte ausgeblendet, aber im Grunde klappt es...
    //  DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate' und angepasst
    // Der modale Hintergrund kommt mit der Drehung nicht klar...
    const modal_weg0 = [ 
    { transform: 'rotate(0) scale(1)' }, /* DOR: von aussen nach innen weg rechts drehend ausblenden */
    //  { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      { transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
     // { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming0 = {
		duration: 1280, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		//iterations: 1
    }
    const mach_zu0 = document.getElementById('shShutter'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu0.addEventListener('click', () => {
      mach_zu0.animate(modal_weg0, ModalTiming0);
    });
    //document.getElementById('shImage').style.transform = 'translate(1,0)';
    // DOR: shImage ausblenden
    //  DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate'
    const modal_weg1 = [ 
    //{ transform: 'rotate(0) scale(1)' }, /* /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
    //  { transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming1 = {
		duration: 1500, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		//iterations: 1
    }
    const mach_zu1 = document.getElementById('shImage'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu1.addEventListener('click', () => {
      mach_zu1.animate(modal_weg1, ModalTiming1);
    });
    //document.getElementById('shImgage').style.animation = 'zoom_out 4s';
		//document.getElementById('shTitle').style.transform = 'translate(1,0)';
		document.getElementById('shTitle').style.animation = 'zoom_out 1.5s';
		//document.getElementById('shNavBar').style.transform = 'translate(1,0)';
		document.getElementById('shNavBar').style.animation = 'zoom_out 1.5s';
		setTimeout (function() 
		{
			shutterMobile.hideShutter();
		},950); // DOR: 550 ms vor 'ModalTiming' auausloesen, damit kein 'flackern' entsteht. Wert weiter herunter gedreht, weil Klick auf 'X' 'zoom-out' in 'hideShutter()' hinzugefügt wurde.
	}
Bei Klick 'X' in der oberen Leiste wird 'hideShutter : function()' ausgelöst. Ist das modale Bild da und man klickt auf das 'X' in der oberen Leiste, dann verschwinden die obere und untere Leiste nach meinen Anpssungen langsam nach innen, wie gewollt, aber das modale Bild meint dann plötzlich werschwinden zu wollen und und kneift den Arsch nach 510 ms zu. Nix Smooth Operator, nix Sade. Weiteres siehe Kommentar.

Code: Select all

  // DOR: Bild soll bei Klick 'X', wie bei 'function shCloseShutter()' verschwinden, aber macht es nicht. Nur NavBar und Title machen es.
	hideShutter : function() {
	var D, S, NB;
	if ( D = this.I('shDisplay') ) window.setTimeout(function(){D.parentNode.removeChild(D)},510);
	if ( S = this.I('shShutter') ) window.setTimeout(function(){S.parentNode.removeChild(S)},510);
	if ( NB = this.I('shNavBar') ) window.setTimeout(function(){NB.parentNode.removeChild(NB)},510);
	//document.getElementById('shTopImg').style.opacity = '0';
	//document.getElementById('shShutter').style.opacity = '0';
	//document.getElementById('shImage').style.opacity = '0';
	//document.getElementById('shTitle').style.opacity = '0';
	//document.getElementById('shNavBar').style.opacity = '0';
	//setTimeout(function(){shutterMobile.hideShutter();},510);
     const modal_weg1 = [ 
    { transform: 'rotate(0) scale(1)' }, /* /* DOR: von aussen nach innen weg rechts drehend ausblenden */
    //  { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      { transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
    //  { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming1 = {
		duration: 1500, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		//iterations: 1
    }
    const mach_zu1 = document.getElementById('shImage'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu1.addEventListener('click', () => {
      mach_zu1.animate(modal_weg1, ModalTiming1);
    });
    //document.getElementById('shImgage').style.animation = 'zoom_out 1.5s'; DOR: Wenn aktiviert, dann geht das JS den Bach runter!!!
		//document.getElementById('shTitle').style.transform = 'translate(1,0)';
		document.getElementById('shTitle').style.animation = 'zoom_out 1.5s';
		//document.getElementById('shNavBar').style.transform = 'translate(1,0)';
		document.getElementById('shNavBar').style.animation = 'zoom_out 1.5s';
		//document.getElementById('shDisplay').style.animation = 'zoom_out 1.5s'; Sieht schön aus, wie das Bild verschwindet, aber man sieht dann auch obere und untere Leiste nach oben verschwinden.
		setTimeout (function() 
		{
			shutterMobile.hideShutter();
		},1080); // DOR: Egal, was ich hier rein Schreibe. Die 3 'if' am Anfang spucken mir in die Suppe!!!
	},

Insgesamt kann ich damit leben, denn ich benutze das 'X' eigendlich nicht. Und wenn alle Stränge reißen, dann habe ich immer noch mein 'function ModalPopup()' in 'CMSroot/cmsimple/userfuncs.php'. Anleitung siehe Kommentare.

Code: Select all

// Die Idee ist kuul, aber an der Durchsetzung hapert es! -> Jetzt gehts!
// Einbindung in Seite
// -------------------
// Parameter 1 '$PopupBildJS':
// Bilddateiname - muss in 'CMSroot/userfiles/images/999_PopupBilderJS/' vorhanden sein, kann aber beliebig bei 'src="' . CMSIMPLE_ROOT . '/Pfad/zum/Bildordner/'' definiert werden. 
// Parameter 2 '$BildBreite': DEPR - wird im div-Tag ausserhalb der Funktion definiert
// Angabe Bildbreite - sieht im Coding schoen aus, klappt aber nicht und macht nix kaputt, wenn sie im Funktionsaufruf ist
// Parameter 3 '$BildAbstandOben': DEPR - wird im div-Tag ausserhalb der Funktion definiert
// Angabe Abstand Bild nach oben - sieht im Coding schoen aus, klappt aber nicht und macht nix kaputt, wenn sie im Funktionsaufruf ist
// Parameter 2 '$BildAusrichtung'
// Fuer ausrichtung des bildes innerhalb des Textes
// Links: Bild im Text links eingebunden
// Rechts: Bild im Text rechts eingebunden
// Mitte: Bild ist zentriert, wird aber vom Text nicht umflossen - mag ich nicht!
// Parameter 3 '$BildTitel':
// Ist fuer die Angabe des Titels unterhalb des Modalen Bildes
// Parameter 4 '$Zaehler':
// Angebe als Ziffer fuer IDs und Variablen, die die Einbindung des Modalen Bildes im Javascript individualisieren. 
// Parameter 5 '$Modus':
// Gibt an, welches Verhalten das Modal-Bild bei 'Click' hat
// 0: oder irgenwas anderes: Modal verschwindet einfach im Hintergrund
// 1: Modal verschwindet im Hintergrund und dreht 360° rechts herum
// 2: Modal verschwindet im Hintergrund und dreht 720° rechts herum
// 3: Modal verschwindet im Hintergrund und dreht 360° links herum
// 4: Modal verschwindet im Hintergrund und dreht 720° links herum
// 5: Modal verschwindet im Hintergrund, blendet sich 360° linksdrehend für '$ZeitBisBildWeg' Millisekunden wieder ein und verschwindet dann sofort
// 6: Modal verschwindet im Hintergrund, blendet sich 1440° rechtsdrehend für '$ZeitBisBildWeg' Millisekunden wieder ein und verschwindet dann sofort
// Die angesprochenen Klassen '[Name][$Modus]' muessen in 'CMSroot/css/modal_popup.css' existieren und ggf angepasst werden. Ging leider ad Hoc nicht anders. Ausserdem bin ich kein Programmierer vor dem Herren!
// Parameter 6
// $CloseButtonText1: String oder Grafik, dann ähnlich einbinden wie bei Parameter 1.
// Parameter 7
// $CloseButtonText2: String oder Grafik dann ähnlich einbinden wie bei Parameter 1.
// DOR: Bei '$Modus' leider nur eine 'String' ueberpruefung. Mit Ziffern hat es nicht hingehauen :-( -> mit dem richtigen Vergleichsoperator (===) funzt das!!!
// Parameter 8
// $ZeitBisBildWeg: Zeit in ms, wenn das Bild nach erneutem erscheinen verschwindet ($Modus5 und $Modus6)
// Aufruf der Funktion im Text als Beispiel: '{{{plugin:ModalPopup('Motörhead-Ace-of-Spades_420.jpg','Rechts','R.I.P. Lemmy',2,4,'Hit It!','Born To Lose<br><br>Live To Win!', 3500);}}}'
//function ModalPopup($PopupBildJS = 'veltinstag.jpg', $BildBreite = '600px', $BildAbstandOben = '185px',$BildAusrichtung = 'Rechts',$BildTitel = 'R.I.P Lemmy', $Zaehler = 0, $Modus = 0, $CloseButtonText1 = 'Zumachen', $CloseButtonText2 = 'Wech Machen', $ZeitBisBildWeg = 3500) DOR: Das ging in die hose, weil ich nicht das div-Tag um den Aufruf herum anspreche - Alles zurueck
function ModalPopup($PopupBildJS = 'veltinstag.jpg',$BildAusrichtung = 'Rechts',$BildTitel = 'R.I.P Lemmy', $Zaehler = 0, $Modus = 0, $CloseButtonText1 = 'Zumachen', $CloseButtonText2 = 'Wech Machen', $ZeitBisBildWeg = 3500)
{
  
  $cout = '<span><img id="myImgID' . $Zaehler . '" class="myImgCls myImgCls' . $Modus . ' myImgCls' . $BildAusrichtung . '" title="' . $BildTitel . '",  src="' . CMSIMPLE_ROOT . '/userfiles/images/999_PopupBilderJS/' . $PopupBildJS . '" alt=""></span>
  <!-- The Modal_-->
  <!-- Closebutton -->
  <div id="myModalID' . $Zaehler . '" class="modal modal' . $Modus . '"><span class="close close' . $Modus . '">Kick It!</span>
  <img id="imgID' . $Zaehler . '" class="modal-content modal-content' . $Modus . '">
  <div id="captionID' . $Zaehler . '" class="captionCls">&nbsp;</div>
  </div>
  <p style="margin: 0; padding: 0;">
  <script>
  // Get the modal
	var modalVar' . $Zaehler . ' = document.getElementById("myModalID' . $Zaehler . '");
	// Get the image and insert it inside the modal - use its "title" text as a caption
	var imgVar' . $Zaehler . ' = document.getElementById("myImgID' . $Zaehler . '"); 
	var modalImgVar' . $Zaehler . ' = document.getElementById("imgID' . $Zaehler . '"); 
	var captionTextVar' . $Zaehler . ' = document.getElementById("captionID' . $Zaehler . '"); 
  var spanVar' . $Zaehler . ' = document.getElementsByClassName("close' . $Modus . '")[0];
	imgVar' . $Zaehler . '.onclick = function(){
    spanVar' . $Zaehler . '.style.display = "block"; 
    spanVar' . $Zaehler . '.innerHTML = \'' . $CloseButtonText1 . '\';
    spanVar' . $Zaehler . '.style.right = "5%" // DOR: Abstand rechts global; 
		modalVar' . $Zaehler . '.style.display = "block";
    //document.write(\'<style>.modal' . $Modus . ': padding-top: ' . $BildAbstandOben . ';</style>\'); DOR: 2 Idee: Sollte den Abstand nach oben an den Aufruf in der Seite uebergeben. Sieht schoen aus, klappt aber nicht!
		modalImgVar' . $Zaehler . '.src = this.src;
    //modalImgVar' . $Zaehler . '.style.padding-top = \"' . $BildAbstandOben . '\"; DOR: 1. Idee: Sollte den Abstand nach oben an den Aufruf in der Seite uebergeben. Sieht schoen aus, klappt aber nicht!
    //modalImgVar' . $Zaehler . '.style.width = \"' . $BildBreite . '"; DOR: 1. Idee: Sollte die Breite an den Aufruf in der Seite uebergeben. Sieht schoen aus, klappt aber nicht!
		captionTextVar' . $Zaehler . '.innerHTML = this.title;
	}
  // When the user clicks on <span> (x), close the modal -> Depr
	// span.onclick = function() { DOR: Jetzt kann man hinklicken, wo mam will und \'modal\' veschwindet
	// modal.style.display = "none";
	//}
  const modal_weg' . $Zaehler . ' = [';
  // Bei Erweiterung bitte nicht '.myImgCls[0-9]', '.modal[0-9]' und '.modal-content[0-9]' in 'CMSroot/css/modal_popup_userfuncs.css' vergessen
  if ($Modus === 1) {
    $cout .= '{ transform: \'rotate(0) scale(1)\' }, 
    { transform: \'rotate(360deg) scale(0)\' } /* rechts herum 1x*/';
  }
  elseif ($Modus === 2) {
    $cout .= '{ transform: \'rotate(0) scale(1)\' }, 
    { transform: \'rotate(720deg) scale(0)\' } /* rechts herum 2x*/';
  }
  elseif ($Modus === 3) {
    $cout .= '{ transform: \'rotate(360deg) scale(1)\' }, 
    { transform: \'rotate(0) scale(0)\' } /* links herum 1x*/';
  }    
  elseif ($Modus === 4) {
    $cout .= '{ transform: \'rotate(720deg) scale(1)\' }, 
    { transform: \'rotate(0) scale(0)\' } /* links herum 2x*/';
  }    
  elseif($Modus === 5)  {
    $cout .= '{ transform: \'rotate(360deg) scale(0)\' }, /* DOR: fuer Motoerhead-Bild angepasst - von innen nach aussen 1x links drehend aufbauend */
    { transform: \'rotate(0) scale(1)\' } /* DOR: fuer Motoerhead-Bild angepasst - wird nach 3500 ms (s.u.) geschlossen*/';
  }
  elseif($Modus === 6)  {
    $cout .= '{ transform: \'rotate(0) scale(0)\' }, /* DOR: fuer Motoerhead-Bild angepasst - von innen nach aussen 4x rechts drehend aufbauend */
    { transform: \'rotate(1440deg) scale(1)\' } /* DOR: fuer Motoerhead-Bild angepasst - wird nach 3500 ms (s.u.) geschlossen*/';
  }
  else {
    $cout .= '{ transform: \'scale(1)\' },
    {transform: \'scale(0)\' } /* einfach weg*/';
  }
	$cout .= '];
	const ModalTiming' . $Zaehler . ' = {
		duration: 1500, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
	}
  const mach_zu' . $Zaehler . ' = document.querySelector("#myModalID' . $Zaehler . '"); //DOR: das hat gewirkt, richtiger Selector, aber \'modal\' kommt wieder hoch
	mach_zu' . $Zaehler . '.addEventListener(\'click\', () => {
		mach_zu' . $Zaehler . '.animate(modal_weg' . $Zaehler . ', ModalTiming' . $Zaehler . ');';
    if ($Modus === 5 | $Modus === 6) {
      $cout .= 'spanVar' . $Zaehler . '.style.right = "3%"; // DOR: hinzugefuegt - Wenn Modal wieder aufgerufen wird, soll der \'Close-Button\' weiter nach rechts geschubst werden - und dem geht
      spanVar' . $Zaehler . '.innerHTML = \'' . $CloseButtonText2 . '\'; // DOR: Statt, wie oben, den \'Kick It!\'-Button auszublenden, neuen Text hinzugefuegt, wenn das Modal hoch kommt.
      setTimeout(function () {modalVar' . $Zaehler . '.style.display = "none";}, ' . $ZeitBisBildWeg . '); // DOR: hier den Nagel auf den Kopf getroffen!!! \'Modal\' verschwindet nach 3500ms, wenn es sich von innen nach aussen aufgebaut hat, weil \'display = "none"\' ausgeloest wird.
    });';
    }
    else {
      $cout .= 'setTimeout(function () {modalVar' . $Zaehler . '.style.display = "none";}, 1480); // DOR: hier den Nagel auf den Kopf getroffen!!! \'Modal\' verschwindet nach 3500ms, wenn es sich von innen nach aussen aufgebaut hat, weil \'display = "none"\' ausgeloest wird.
    });';
    }
  $cout .= '</script>
   <p>';
  $cout .= '<style>.modal' . $Modus . ': width: ' . $BildBreite . '; padding-top: ' . $BildAbstandOben . ';</style>'; // 3. Idee: Sollte den Abstand nach oben und die Bildbreite an den Aufruf in der Seite uebergeben. Sieht schoen aus, klappt aber nicht! Und macht nix kaputt, wenn das Ding noch aktiv ist ;-) Beim Test mit loeschen aller 'modal[0,9]'-Klasen in 'modal_popup_userfuncs.css' sieht alles komisch aus - nicht wie HaHa!
return $cout;
}
Wie bin ich nur auf die Variable '$cout' gekommen?

Einbindung

Zugehöriges CSS in 'CMSroot/templates/[tmpl-name]/stylesheet.css' mit '@import url(../../css/modal_popup_userfuncs.css);' eingebunden aus 'CMSroot/css/modal_popup_userfuncs.css', damit das CSS auch in Tiny und der Druckvorschau zieht. (Pfade können natürlch angepasst werden)

CSS

Code: Select all

/***************************************************************************/
/* Geklaut von: https://www.w3schools.com/howto/howto_css_modal_images.asp */
/*              ... und leichte Aenderungen hinzugefuegt                   */
/***************************************************************************/

body {font-family: Arial, Helvetica, sans-serif;}

.myImgCls { /* DOR: durch 'display:' und 'float:' in den nachfolgenden Text rechtsbuendig integriert */
  display: block;  /* DOR: aus Test/Blindtext_spielwiese/css/style_spielwiese.css entnommen */
	/*float: right;  DOR: aus Test/Blindtext_spielwiese/css/style_spielwiese.css entnommen */
  width:100%;
	max-width: 250px; /* DOR: Breite des Bildes in der Seite */
  margin: 3px 0 16px 20px; /* DOR: hinzugefuegt - nach unten geschubst, links Platz zu Text gemacht */
  padding: 6px;
  border: 1px solid #aaa;	/* DOR: Border wie in 'CMSroot\templates\dor_rezepte_tmpl\stylesheet.css' */
  box-shadow: inset 1px 0px 3px #aaa, inset 0px 1px 3px #aaa, inset -1px 0px 3px #aaa, inset 0px -1px 3px #aaa; /* DOR: box-shadow wie in 'CMSroot\templates\dor_rezepte_tmpl\stylesheet.css' */
	/*border-radius: 5px;*/
	border-radius: 0 18px 18px 0; /* DOR: runde Ecken rechts gemacht Bei Seitenansicht zieht die Klasse 'dor_right_border_rzpt' */
  cursor: pointer;
  transition: 0.3s;
}

.myImgCls:hover {cursor: pointer; opacity: 0.8;} /* DOR: von 0.7 auf 0.8 hochgedreht */

.myImgClsLinks { /* DOR: der Text umfliesst das Bild rechts */
  float: left; /* DOR: aus Test/Blindtext_spielwiese/css/style_spielwiese.css entnommen */
  margin: 0px 20px 20px 0; /* DOR: hinzugefuegt - nach unten geschubst, links Platz zu Text gemacht */
  /*padding-top: 18px;*/
}

.myImgClsRechts { /* DOR: der Text umfliesst das Bild linkss */
  float: right; /* DOR: aus Test/Blindtext_spielwiese/css/style_spielwiese.css entnommen */
  margin: 0px 0 20px 20px; /* DOR: hinzugefuegt - nach unten geschubst, links Platz zu Text gemacht */
  /*padding-top: 18px;*/
}

.myImgClsMitte { /* DOR: der Text umfliesst das Bild gar nicht - Kakke */
  float: center; /* DOR: aus Test/Blindtext_spielwiese/css/style_spielwiese.css entnommen */
  margin: 20px auto; /* DOR: hinzugefuegt - nach unten geschubst, links Platz zu Text gemacht */
  /*padding-top: 18px;*/
}

.myImgAbstand { /* DOR: Abstand Bild zum oberen Absatz, damit die Bildoberkante mit dem Absatz unter dem div-Tag abschliesst. */
  margin-bottom: -25px; 
  padding-top: 8px;
}

.myImgCls1 {
}

.myImgCls2 {
}

.myImgCls3 {
}

.myImgCls4 { /* DOR: durch 'display:' und 'float:' in den nachfolgenden Text rechtsbuendig integriert */
	max-width: 300px; /* DOR: Breite des Bildes in der Seite */
  padding: 6px; /* DOR: fuer Motoerhead-Bild angepasst */
}

.myImgCls5 {

}

.myImgCls5 {

}

/*.myImgCls4:hover {cursor: pointer; opacity: 0.8;}  DOR: von 0.7 auf 0.8 hochgedreht */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 210px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  /*background-color: rgba(0,0,0,0.9);  Black w/ opacity */
  background-color: rgba(68,68,68, .4); /* DOR: #444 w/ opacity */
  animation-name: zoom; /* DOR: hinzugefuegt Einblendung Hintergrund */
  animation-duration: 1.2s; /* DOR: einblendung hintergrund besser als 0.8s, weil das bild mit der einblendung zeitlich hinterher kommt - siehe Kommentar 'Add Animation' */
}

.modal0, .modal8, .modal9 {
  padding-top: 180px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

.modal1 {
  padding-top: 85px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

.modal2 {
  padding-top: 85px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

.modal3 {
  padding-top: 85px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

.modal4 {
  padding-top: 145px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

.modal5 {
  padding-top: 85px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

.modal6 {
  padding-top: 85px; /* Location of the box *//* DOR: fuer Motoerhead-Bild angepasst */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  padding: 6px;
  /*margin-top: 45px;  DOR: hinzugefuegt */
  /*margin-top: 100px;  DOR: geaendert -passt besser - ueberfluessig - wird in '.modal padding-top:' abgefruehstueckt -> bei aenderung auch '.close' anpassen */
  display: block;
  /*width: 80%;*/
  /*width: 85%;  DOR: breiter - funzt nicht*/
  /*max-width: 600px;*/
  max-width: 640px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut */
  background: rgba( 247, 245, 239, .6); /* DOR: hinzugefuegt - und dem jeed */
	/*border: 8px solid rgba(154, 205, 50, .65);  DOR: hinzugefuegt */
	/*border: 4px solid rgba(154, 205, 50, .8);   DOR: hinzugefuegt */
	border: 4px solid rgba(153,51,0, 1);  /* DOR: hinzugefuegt #930 */
	/*border-radius: 10px;  DOR: hinzugefuegt */
	border-radius: 0 28px 28px 0; /* DOR: hinzugefuegt */
	box-shadow: 3px 3px 3px 3px rgba(68,68,68, .7); /* DOR: alt #4a4a4a 74,74,74 -> #444 ist dunkler - hinzugefuegt - bisschen mehr opacity */
	/*box-shadow: 0px 0px 5px 2px rgba(68,68,68, 1); DOR:  alt #4a4a4a 74,74,74 -> #444 ist dunkler - hinzugefuegt , drumherum schatten -> doof */
}

.modal-content0, .modal-content8, .modal-content9 {
  max-width: 750px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}
.modal-content1 {
  max-width: 450px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}

.modal-content2 {
  max-width: 450px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}

.modal-content3 {
  max-width: 450px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}
.modal-content4 {
  padding: 6px; /* DOR: fuer Motoerhead-Bild angepasst */
  max-width: 850px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}
.modal-content5 {
  padding: 6px; /* DOR: fuer Motoerhead-Bild angepasst */
  max-width: 450px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}
.modal-content6 {
  padding: 6px; /* DOR: fuer Motoerhead-Bild angepasst */
  max-width: 450px; /* DOR: breiter, aber so, dass sich bei meiner Bildschirmaufloesung in Firefox rechts keinen Scrollbalken fuer das Bild aufbaut - fuer Motoerhead-Bild angepasst  */
}
/* Caption of Modal Image  -> DOR: Umstellen auf '.captionCls' 
#captionID, #captionID0, #captionID1, #captionID2, #captionID3, #captionID4  { */
.captionCls { 
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  font-family: SpecialElite; /* DOR: hinzugefuegt aus 'CMSroot/templates/dor_rezepte_tmpl/stylesheet.css'. */
  /*font-size: 25px;  DOR: hinzugefuegt */
  font-size: 32px; /* DOR: hinzugefuegt - Schrift groesser*/
  font-weight: 700; /* DOR: hinzugefuegt */
  text-align: center;
  color: rgba(235, 230, 212, .9); /* DOR: #EBE6D4 - alt 247, 245, 239 */
  /*text-shadow: .18em .18em 4px  black;*/
  /*text-shadow: .25em .25em 4px rgba(68,68,68, 1);  DOR: hinzugefuegt #444  */
  text-shadow: -1px 0 rgba(153,51,0, 1), 
               0 1px rgba(153,51,0, 1), 
               1px 0 rgba(153,51,0, 1), 
               0 -1px rgba(153,51,0, 1), 
               .25em .25em 4px rgba(68,68,68, 1); /* DOR: hinzugefuegt #930 und #444  */
  /* padding: 10px 0; */
  padding: 20px 0; /* DOR: Abstand oben/unten groesser */
  height: 150px;
}


/* Add Animation ZoomIn -> ZoomOut - entnommen von https://developer.mozilla.org/en-US/docs/Web/API/Element/animate */
.modal-content, .modal-content0, .modal-content1, .modal-content2, .modal-content3, .modal-content4, .modal-content5, .modal-content6, 
#captionID, #captionID0, #captionID1, #captionID2, #captionID3, #captionID4, #captionID5, #captionID6 { /* DOR: Komma ist wichtig bei mehreren Bildern -> '#caption0, #caption1, #caption2', damit es funzt, aber der ARSCH vor dem Monitor hat das nicht gerafft! Gott vergibt, aber CSS nicht! */
  animation-name: zoom;
  animation-duration: .6s; /* DOR: einblendung bild und beschreibung besser als 0.8s */
}

#captionID, #captionID0, #captionID1, #captionID2, #captionID3, #captionID4, #captionID5, #captionID6 {
  animation-delay: 1.5s; /*  DOR: hinzugefuegt - interessant, denn Titel kommt beim 1. Aufruf nach 1.5s nochmal hoch, aber finde ich gut :-D */ 
  animation-duration: 2.5s;
}

/* The Close Button - DOR: Nei mehreren Modal Bildern werden nur diese Einstellungen geschluckt. Da kann man sich close1, close2, ... sparen */
.close {
  position: absolute;
  top: 175px; /* DOR: bisschen tiefer geschubst */
  right: 10%; /* DOR: bisschen nach links geschubst */
  /*color: #f1f1f1;*/
  color: rgba(235, 230, 212, .9); /* DOR: #EBE6D4; alt #bbbccc -> 187,188,204 */
  font-family: SpecialElite; /* DOR: hinzugefuegt aus 'CMSroot/templates/dor_rezepte_tmpl/stylesheet.css' */
  font-size: 36px;
  font-weight: 600;
  text-shadow: -1px 0 rgba(153,51,0, 1), 
               0 1px rgba(153,51,0, 1), 
               1px 0 rgba(153,51,0, 1), 
               0 -1px rgba(153,51,0, 1), 
               .25em .25em 4px rgba(68,68,68, 1); /* DOR: #930 und #444 -> bisschen dunkler passt */
  /*text-shadow: -1px 0 rgba(105,105,105,1), 0 1px rgba(105,105,105,1), 1px 0 rgba(105,105,105,1), 0 -1px rgba(105,105,105,1);  dimgrey/#696969 -> vorhandener Grauton -> zu hell */
  transition: 0.3s; /* DOR: bezieht sich nur auf MouseOver 'Mach zu!' */
}


/*.close:hover, .close0:hover, .close0:hover, .close2:hover, .close3:hover, .close5:hover,
.close:focus, .close0:focus, .close1:focus, .close2:focus, .close3:focus, .close5:focus {*/
.close:hover,
.close:focus {
  /*color: rgba( 247, 245, 239, .9);  DOR: #f7f5ef - alt: #9acd32 */
  color: rgba( 153,51,0, 9); /* DOR: #930 */
  text-shadow: -1px 0 rgba(247, 245, 239, 1), 
               0 1px rgba(247, 245, 239, 1), 
               1px 0 rgba(247, 245, 239, 1), 
               0 -1px rgba(247, 245, 239, 1), 
               .25em .25em 4px rgba(68,68,68, 1); /* DOR: #f7f5ef und #444 */
  text-decoration: none;
  cursor: pointer;
}
.close0, .close8, .close9 {
  top: 160px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}
.close1 {
  top: 60px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}
.close2 {
  top: 60px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}
.close3 {
  top: 60px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}

.close4 {
  top: 60px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}

.close5 {
  top: 60px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}

.close6 {
  top: 60px; /* DOR: bisschen tiefer geschubst */
  right: 3%; /* DOR: bisschen nach links geschubst */
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

@keyframes zoom_out {
  from {transform:scale(1)} 
  to {transform:scale(0)}
}

So, das wars erstmal. Es ginge vielleicht auch ein wenig eleganter mit 'regexp', aber, wie ich schon schrieb: Ich bin kein Coder vor dem Herrn. Wobei ich nicht weiß, ob 'regexp' in CSS integriert sind. z.B #captionID(0-9)

Wayne es interessiert: Mein hr-Tag sieht so aus

hr {
  height: 2px; 
  clear: both; 
  background-image: linear-gradient(to right, /* DOR: Style an class .dor_hr angepasst. Linie links heller, mitte dunkler, rechts heller */
                                    rgba(124, 124, 124, 0.10), 
                                    rgba(124, 124, 124, 0.85), 
                                    rgba(124, 124, 124, 0.10));
  border: 0; 
  margin: 10px 0;
}
Gruß
Gonzo

Ach ja, wer lesen kann ist klar im Vorteil
D = Display
S = Shutter
NB = NavBar
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Modal ausblenden bei Klick auf 'X'

Post by Gonzo Gates »

Hallo Gert,

meinen letzten Beitrag 'von Gonzo Gates » Di 12. Sep 2023, 19:45' und diesen bitte löschen. Ich habe da zwar etwas funktioierendes, aber nicht fertig gedachtes abgeliefert, z.B. dass ich den Aufruf in Tiny in div-Tags einbette und dass das CSS auch irgendwie ungar ist.

Habe zu lange nicht mehr hinein geschaut, was ich gemacht hatte. Einfach 'copy and paste' ist manchmal dumm.

Danke
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Re: Modal ausblenden bei Klick auf 'X'

Post by Gonzo Gates »

Hallo Gemeinde,

da Gert meinen Eintrag nich löschen kann/wollte, hier noch ein paar Details:

Einbindung erfolgt mit

Code: Select all

<div class="myImgAbstand">{{{plugin:ModalPopup('chefsalat7.png','Rechts','Chef im Salat',3,0,'Make it and<br><br>eat it!','Welcher Chef geht als<br><br>nächster baden!',0);}}}</div>
3 Beispiele: http://dorilaraukft.bplaced.net/sites/C ... Testarossa ab Überrschrift 'Eingebundenes JS'

Dort erscheint auch die Ausgabe meiner ersten 'Gehversuche' von mir mit einer Funktion in 'CMSroot/cmsimple/userfuncs.php' (Dieses vorgehen wurde mir von Gert in https://cmsimple.org/forum/viewtopic.php?t=1236 ans Herz gelegt) für später. Hier ist kein tieferes CSS im Spiel.

Code: Select all

// Einbindung in Seite
// {{{plugin:jsImgModal('Foo Bar', Izmir Egal', 0, 0);}}}
// Parameter 1:
// $Zaehler: Angebe als Ziffer fuer alle IDs und Klassen, die die Einbindung des Modalen Bildes im Javascript individualisieren. Die angesprochenen Klassen 'Name[$Zaehler]' muessen in 'CMSroot/css/modal_popup.css' existieren 
// Parameter 2
// $CloseButtonText1: String oder Grafik
// Parameter 3
// $CloseButtonText2: String oder Grafik
// DOR: Hier leider nur eine 'String' ueberpruefung. Mit Ziffern hat es nicht hingehauen :-( -> mit dem richtigen Vergleichsoperator funzt das!!!
// 0: oder irgenwas anderes: Modal verschwindet einfach im Hintergrund
// 1: Modal verschwindet im Hintergrund und dreht rechts herum
// 2: Modal verschwindet im Hintergrund und dreht links herum
// 3: Modal verschwindet im Hintergrund, blendet sich für 2 Sekunden wieder ein und verschwindet dann sofort
// function jsImgModal($Zaehler = 0, $CloseButtonText1 = 'Mach Wech', $CloseButtonText2 = 'Ich mich auch', $MyImgNumber) {
function jsImgModal($jsText = 'Hellow Words!', $param0 = 'Param0', $varModalVerschwindet = 0, $MyImgNumber) {
  $cout = '<h3>' . $jsText . ' (Parameter 1)</h3>';
  $cout .= '<p>' . $param0 . ' (Parameter 2)</p>';
  
  if ($varModalVerschwindet === 1) {
    $cout .= '<p>Ich bin Nummer ' . $varModalVerschwindet . ' (Parameter 3): Modal verschwindet im Hintergrund und dreht rechts herum</p>';
  }
  elseif ($varModalVerschwindet === 2) {
    $cout .= '<p>Ich bin Nummer ' . $varModalVerschwindet . ' (Parameter 3): Modal verschwindet im Hintergrund und dreht links herum</p>';
  }
  elseif ($varModalVerschwindet === 3) {
    $cout .= '<p>Ich bin Nummer ' . $varModalVerschwindet . ' (Parameter 3): Modal verschwindet im Hintergrund, blendet sich für 2 Sekunden wieder ein und verschwindet dann sofort. Zeit Verschwinden wird auch geändert.</p>';
  }
  else {
    $cout .= '<p>Ich bin Nummer ' . $varModalVerschwindet . ' (Parameter 3)...Egal: Modal verschwindet einfach im Hintergrund</p>';
  }
  
  $cout .= '<p>ID #MyImg' . $MyImgNumber . ' (Parameter 4)</p>';
  $cout .= '<p>Klasse .MyImg' . $MyImgNumber . ' (Parameter 4)</p>';
  
  return $cout;
}
Hier hat es mit '$cout' angefangen...

Gruß
Gonzo

Erratum: Ich habe oben Mist geredet, denn man sieht in Tiny nur den Aufruf

Code: Select all

{{{plugin:ModalPopup($PopupBildJS, $BildAusrichtung, $BildTitel, $Zaehler, $Modus, $CloseButtonText1, $CloseButtonText2,$ZeitBisBildWeg;}}}
und nicht die Bilddarstellung!
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Post Reply