Einbindung modales Bild in eine Seite mit JS

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

Einbindung modales Bild in eine Seite mit JS

Post by Gonzo Gates »

Hallo Gemeinde,

Eine Überarbeitung hat statt gefunden bzgl Ausrichtung des Bildes...

weil ich die Einbindung eines Bildes, dass sich dann langsam modal öffnet und schließt, habe ich mein eigenes JS und CSS in meine Seiten eingebunden. Problem war/ist, dass jedes Script bei CSS-IDs, CSS-Klassen, Variablen, Konstanten und Funktionen, wenn mehrere Bilder so angesprochen werden sollen, individualisiert werden müssen.

Auslöser, wie man es in CMSimple besser machen kann, war die Anfrage 'Einbindung SVG Banner in Seiten' (https://cmsimple.org/forum/viewtopic.php?t=1236)

Anleitung:

1. In 'CMSroot/userfiles/images/[Ordner-Modale-Bilder]' erstellen
2. In 'CMSroot/css/modal-popup-userfuncs.css' erstellen.
3. In 'CMSroot/cmsimple' 'userfuncs.php' erstellen.
4. Einbinden in die Seite

ad 1. Ist ja nicht so schwer

ad 2. Folgenden Code verwenden und ggf. anpassen

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: 85px; /* 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: 450px; /* 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 ist im Seitenquelltext eingefuegt - 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 */
}

/* 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: 60px; /* 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)}
}

ad 3. Folgenden Code verwenden und ggf. anpassen

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
// 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 . '" title="' . $BildTitel . '",  src="' . CMSIMPLE_ROOT . '/userfiles/images/999_PopupBilderJS/' . $PopupBildJS . '" alt="" width="' . $BildBreite . '"></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";
		modalImgVar' . $Zaehler . '.src = this.src;
		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>';

return $cout;
}
ad 4. In Seite einbinden

Code: Select all

 {{{plugin:ModalPopup('Motörhead-Ace-of-Spades_420.jpg','R.I.P. Lemmy','Rechts',2,4,'Hit It!','Born To Lose<br><br>Live To Win!', 3500);}}}
Problem:
1. Es gibt in 'userfuncs.php' keinen Abfang von Fehleingaben und man muss sich an die Doku halten
2. In der Seiteneinbindung muss man sich an die Parameter-Eingabe halten und ggf mit dem letzten herum experimentieren
3. In der CSS-Datei müssen ggf. Anpassungen in den Klassen vorgenommen werden.

Ist kein schöner Guss, aber bis vor meiner Anfrage im Forum (https://cmsimple.org/forum/viewtopic.php?t=1240) fand ich das ganz gut.

Gruß
Gonzo

Das JS und CSS wurde überarbeitet:
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Post Reply