Seite 1 von 1

Popup Einblendungen

Verfasst: Mi 29. Jan 2025, 14:52
von bonapart
Moin zusammen,

ist es möglich, auf einer Mobirise-Seite ein Popup Fenster z.B. für eine Schnellinformation anzeigen zu lassen? Z.B. wenn ich auf unserer Vereinsseite bei den Mitgliedsbeiträgen auf unsere IBAN hinweise, die aber zusammen mit den restlichen Kontodaten wie BIC per Popup schnell angezeigt werden soll. Also per Link auf "IBAN".
Oder jede andere Info, die eigentlich nicht an diese Stelle passt, aber auch nicht erst durch eine weitere Unterseite aufgerufen werden muß.
Man kann da noch weiter "spinnen": Für eine wichtige Info ein automatisches Popup einblenden, welches sich dann nach Aufruf einer Seite für kurzer Zeit selbst oder per "schließen" verabschiedet.
Geht sowas mit Mobirise 5.9.xx, all extensions ?
Habe auch schon im Forum gesucht, aber nur Hinweise auf Popup-Videos gefunden. Mit schwebt eher eine Text-Information vor, ggf. mit kleiner Grafik wie ein Ausrufezeichen o.ä.

Frage nicht für einen Freund, sondern für meinen Verein bzw. dessen Seite :tu:
Vielen Dank vorab für Eure, wie immer, treffenden Antworten.

Gruß bonapart

Re: Popup Einblendungen

Verfasst: Mi 29. Jan 2025, 15:49
von Volker
Du kannst auf jeder Seite ein Popup erstellen. Einfach unter Extensions den Poup Builder aufrufen und auf die Seite ziehen. Der ist immer ganz unten zu finden dann.
Dann kannst Du entweder einen Textlink oder Button mit dem Poup verlinken.

Da kann man Texte, Bilder, Videos oder Iframes einfügen - je nach dem was gebraucht wird.
Die Größe kann man auch wählen.
Etc- etc.

Schau einfach hier bei Tommy ;)

https://www.mobirise-tutorials.com/Busi ... ilder.html

oder hier:

https://www.mobirise-tutorials.com/Nach ... s-User.php

Re: Popup Einblendungen

Verfasst: Do 30. Jan 2025, 08:41
von stobi_de
Tja, es geht auch ein wenig "eleganter".
https://www.raketen-tanzgruppe.de

Hier gibt es ein Fly-In Fensterchen, welches dann beim Scrollen ausgeblendet wird.
Ist halt Handarbeit.

Frank

Re: Popup Einblendungen

Verfasst: Do 30. Jan 2025, 08:50
von Tommy Herrmann
Moin Frank,

Du - so nutzt das Bonabart mal gar nichts. Er hat gerade erst mit Mobirise begonnen und kennt sich mit HTML nicht wirklich aus.

Da müsstest Du schon alles ganz genau beschreiben und die Skripte hier posten.

Re: Popup Einblendungen

Verfasst: Do 30. Jan 2025, 11:33
von bonapart
Danke Tommy,

ja, mit HTML oder PHP kenne ich mich nicht wirklich aus. Da kann ich zwar was anpassen und zum laufen bringen, aber selber programmieren - Herrje! Dafür gibt es ja pfiffige Leute wie Dich/Euch hier im Forum.

Ich habe aber ein Popup in meinem Projekt mit dem Builder eingebaut und alles klappt. Reicht für mein Projekt erstmal aus. Wird ja eh nicht viel verwendet werden, ab an bestimmte Stellen ist das schon ganz nützlich.
Das schließt aber nicht aus, auch fortgeschrittene Popups in einem Testprojekt auszuprobieren.

Vielen Dank in die Runde, bin ich wieder einen Schritt weiter.

Re: Popup Einblendungen

Verfasst: Do 30. Jan 2025, 16:09
von Bushisan
Hallo bonapart,

habe mal etwas von Tommy abgeändert und angepasst um eben auch solche Dinge mal schnell einblenden zu können. Da gibts auch ne Möglichkeit das nur inmal aufraufenzu lassen. Habe noch ne Uraltversion von Mobirise ohne Popupbuilder.

Wenn Dir das gefällt kann ich Dir ne Beschreibung und die Codes hier reinstellen.

https://www.shotokan-karate-dojo-neukir ... #openModal

Grüße an alle aus der schönen Oberpfalz
Hubert

Re: Popup Einblendungen

Verfasst: Do 30. Jan 2025, 17:51
von bonapart
Hallo Bushisan,

vielen Dank für Deinen Beitrag.
Ja, das sieht schon sehr ansprechend aus. Über den Code würde ich mich freuen. Mußt mir nur mitteilen, wo genau das eingebaut werden muß, so ohne Builder.

:tu: bonapart

Re: Popup Einblendungen

Verfasst: Do 30. Jan 2025, 18:20
von Bushisan
Hi - bin jetzt für den Rest des Abends unterwegs - ich stell das Morgen rein !

Schönen Abend noch !

Re: Popup Einblendungen

Verfasst: Fr 31. Jan 2025, 00:31
von Bushisan
Hallo bonapart,

ich versuche das jetzt mal hier richtig reinzustellen.

Dies hier habe ich in den Seiteneinstellungen in den Bereich "Inside <head> code:" kopiert
---------------------------------------------------------------------------------------------------------------------------

Code: Alles auswählen

<script>
      function myModal() {
        window.location.href = '#openModal';
      }
      window.onload = myModal;
</script>



<script>
window.addEventListener("DOMContentLoaded", function () {
 if ('localStorage' in window &&
     window['localStorage'] !== null) {
  if (window.localStorage.getItem("DSGVO")) {
   document.getElementById("dsgvo_hinweis").style.display="none";
  }
 }
});
function akzeptieren() {
 if ('localStorage' in window &&
     window['localStorage'] !== null) {
  window.localStorage.setItem("DSGVO", "true");
  document.getElementById("dsgvo_hinweis").style.display="none";
 }
}
</script>

-------------------------------------------------------------------------------------------------------------------

Hier die HTML des Blocks:
<div>
<!-- Beginn Anzeige vom Modal -->
<a href="javascript: myModal();">Modal</a>
<div id="dsgvo_hinweis">
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Schließen" class="close">X</a>
<h1>Einladung zur Jahreshauptversammlung <br>am 12.02.2025</h1>
<a href="https://www.shotokan-karate-dojo-neukir ... 2025_2.pdf" target="_blank">zur Einladung ==&gt;</a>
</div>
</div>
</div>
<!-- Ende Anzeige vom Modal -->
</div>
------------------------------------------------------------------------------------------------------------------------------------------

und hier die CSS des Blocks:

Code: Alles auswählen

div {
  padding: 10px 0;
  color: #777;
  text-align: center;
    background-color: white;
}
p {
  font-size: 20px;
  color: #777;
}

a {
  font-size: 20px;
  color: blk;
}

h1 {
 color : blk;
}
.modalDialog {
  position: Fixed;
  font-family: Verdana, Sans-Serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: None;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: Auto;
}
.modalDialog > div {
  width: 800px;
  max-width: 90%;
  position: relative;
  margin: 10% Auto;
  padding: 20px 10px 20px 10px;
  border-radius: 30px;
  background-color: #FFFFFF;
   background-color: white;
  cursor: Default;
}
.close {
  background-color: orange;
  opacity: 1.0;
  color: #ffffff;
  line-height: 30px;
  width: 30px;
  position: Absolute;
  right: -12px;
  text-align: Center;
  top: -10px;
  text-decoration: None;
  font-size: 14px;
  font-weight: Bold;
  border-radius: 12px;
  box-shadow: 5px 5px 8px #000000;
}
.close:hover {
  background-color: #00D9FF;
}
---------------------------------------------------------------------------------------------------------------------------------------------
Der Block ist am Seitenende eingefügt. Der Schriftzug "Modal" weiß wie der Hintergrund. Brauche ich das Popup nicht mehr entferne ich den Block . Das ist eigentlich schon alles. Den Block selbst hab ich als Userblock gespeichert und passe ihn den jeweiligen Bedürfnissen an.

Das eigentliche Popup ist in den Tutorials von Tommy beschrieben:

https://mobirise-tutorials.com/LawyerM4 ... html#close



Ich hoffe Dir damit geholfen zu haben. Grüße und viel Erfolg!
Hubert

Re: Popup Einblendungen

Verfasst: Fr 31. Jan 2025, 11:40
von bonapart
Hallo Hubert,

vielen Dank für den Code. Ich werde das demnächst mal ausprobieren.

Schönes Wochenende :)

VG bonapart