Mobirise-Tutorials.com

Hallo,
ich hätte gerne daß beim Aufrufen meiner Seite ein Popup-Fenster erscheint mit
- Hinweistext
- einem Link
- einem Schliessen-Button bzw. Schliessen-Text

Nun habe ich mir diversese Seiten "reingezogen" , wo das MODAL behandelt wird, mal mit HTML, mal mit CSS und JAVA in der Seiteneinstellung, es funktioniert nichts.
Das einzige, was geklappt hat, ist über HTML von der Beispielseite von Werner Zenk. Beim Aufrufen der Seite erscheint dann sofort ein Button (Klick mich) und beim Anklicken erscheint das Modal. Der "Klick-mich-Button" erscheint auch noch ganz unglücklich links oben und bleibt da auch immer.
Ich möchte aber, daß das Modal direkt beim Aufruf der Seite erscheint, ohne diesen "klick-mich"-Button.

Am liebsten wäre mir eine Lösung ausschließlich mit HTML. Nun kenne ich mich nicht damit aus, wo genau der Code im Editor hingeschrieben wird. Daß das einmal schon irgendwie funktioniert hat, war eher Zufall.

Es wäre toll, wenn mir geholfen wird

Moin,

Einen Link kannst Du im Modal ganz normal setzen, genau wie sonst auch in den Mobirise-Seiten.

... um eine Popup-Modal von "Bootstrap 4" zu schließen musst Du lediglich diese Anweisung hinzufügen:

data-dismiss="modal"

Siehe auch auf meiner Turorial-Seite:

https://www.mobirise-tutorials.com/Busi ... ml#dismiss

Beispiel-Code an einem Button "Beenden":

Beispiel hat geschrieben:
<div class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove" mbr-buttons mbr-theme-style="display-4"><a class="btn btn-md btn-primary" data-dismiss="modal" data-app-placeholder="Type Text">Beenden</a></div>

Bemerkung: ab "Bootstrap 5" (Mobirsie 5) heißt diese Anweisung dann:

data-bs-dismiss="modal"

Hast Du nur den Codeeditor oder das komplett Paket ?

Wenn Du alle Erweiterungen hast, hast Du doch auch das Popup in Mobirise.

Hallo Tommy,
danke, werde mich noch mal ran machen.

Hallo Volker,
ich habe nur den Code-Editor und ich möchte bei Mobirise4 bleiben. Außerdem wird mir bei Mobirise4 in den Erweiterungen der Popup-Builder garnicht angeboten.

der "Popup Builder" von Mobirise macht das natürlich sehr viel einfacher.

Ohne den geht es aber auch - einfach mit Bootstrap-Klassen, wie ich hier beschreibe:

https://www.mobirise-tutorials.com/Port ... Modal.html

Hallo Tommy,
genau diese Seite und auch die von getbootstrap.com bin ich immer und immer wieder durchgegangen.
Wie schon im ersten Beitrag geschrieben, weiß ich noch nicht mal, wo ich genau den Code hinschreiben muss

Du musst doch nur mit Copy und paste den Code von Tommy kopieren ;-)

Füge einen Artikel Block ein oder nimm einen vorhandenen Deiner Seite.
Da im rechten Bereich des CSS Editor unter der vorhandenen CSS das einfügen:

Code: Alles auswählen

.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: 500px;
  max-width: 90%;
  position: relative;
  margin: 10% Auto;
  padding: 20px 10px 20px 10px;
  border-radius: 30px;
  background-color: #FFFFFF;
  background: linear-gradient(#ffffff, #999999);
  cursor: Default;
}
.close {
  background-color: #ff0000;
  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;
}

In Seiteneinstellungen "Inside <head> code"

kopierst Du das:

Code: Alles auswählen

<!-- Skript zum automatischen Aufruf der Anker ID vom Modal -->
<script>
      function myModal() {
        window.location.href = '#openModal';
      }
      window.onload = myModal;
</script>

Das sorgt für das Öffnen des Fensters bei Start

In den Artikelblock wo Du auch das CSS rein kopiert hast fügst Du nun im linken Bereich ( HTML Editor) folgendes ein.

Code: Alles auswählen

<!-- Beginn Anzeige vom Modal -->

<div id="openModal" class="modalDialog">
 <div>
  <a href="#close" title="Schließen" class="close">X</a>
  <h1>Modal-Fenster</h1>
  <p>Hier steht der Text der eingefügt werden soll.</p>
     <p>Je mehr Text, desto größer das Fenster :-).</p>
 </div>
</div>
<!-- Ende Anzeige vom Modal -->

Den Text dort natürlich ändern also alles zwischen <p> </p>
und die Überschrift <h1>Modal-Fenster </h1> natürlich auch ;-)

Klick auf das Auge in Mobirise und Du siehst direkt ob es klappt

Manno,
jetzt wird mir alles klar !
Ich hatte wie beschrieben das CSS in den entspr. Editor eingefügt, dann wie beschrienen bei Seiteneinstellung den Code eingefügt.
Aber ich habe HTML vergessen, kann ja nicht klappen

Vielen Dank

Moin,

also Volker hat sich jetzt nicht auf das Bootstrap-Modal sondern auf das CSS-Modal bezogen, das ungleich aufwändiger ist und von unserem Werner Zenk entwickelt wurde:

https://www.mobirise-tutorials.com/Lawy ... #openModal

Hier auf der Seite vom Werner:

https://werner-zenk.de/css/modal-fenste ... nd_css.php

Das Bootstrap-Modal, das ich eigentlich meinte, steht hier beschrieben:

https://www.mobirise-tutorials.com/Port ... content2-k

Hier verwende ich einen einfachen Textblock aus der Kategorie "Article" für den Einbau

Hier der Button "Klick mich" zum Aufruf des Modals sowie der Code vom Bootstrap-Modal selbst. Das gehört in den "Code Editor" in den linken Bereich "HTML Editor" (siehe Screenshot unten):

Code: Alles auswählen

<!-- Button Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalButton">
  Klick mich
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalButton" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal Titel</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="false">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Das ist der Body von diesem <b>Modal</b></p><p>
      </p></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
        <!-- <button type="button" class="btn btn-primary">Button</button> -->
      </div>
    </div>
  </div>
</div>

Diese CSS gehört rechts in den Bereich "CSS Editor" vom "Code Editor". Damit wird lediglich die Höhe, hier auf 300px begrenzt:

Code: Alles auswählen

.modal-content {
  max-height: 300px;
  overflow-y: auto;
}

Wenn das Modal mit dem Aufruf der Seite automatisch dargestellt werden soll, dann kopierst Du dieses kleine JavaScript noch in den Bereich:

> Menü > "Page Settings" (Seiteneinstellungen) > Bereich "End of <body> code"

Code: Alles auswählen

<script>
    $(window).load(function() {
        $('#exampleModalTextLink').modal('show');
    });
</script>

... dann würde man natürlich den Button "Klick mich" wohl eher nicht benötigen, den ich oben im Code habe um das Modal zu öffnen.

Hallo Tommy,
toll, wie mir geholfen wird. Also, das CSS-Modal von Werner Zenk funktioniert jetzt bei mir auch, das ist schon Mal ein Erfolg. Einziger "Knackpunkt" ist, daß es beim Browsen und wiederholtem Aufruf innerhalb der Seite wieder aufgerufen wird

Das Bootstrap-Modal nehme ich mir jetzt auch noch mal vor. Durcheinander gekommen bin ich beim Versuch, beide Versionen zu probieren, denn beim Bootstrap-Modal muss in der Seiteneinstellung der Code in "End of Body" und beim CSS-Modal zu " inside head code".

Ich schaffe das und gebe Rückmeldung

Lies mal mein Tutorial nochmals richtig. Im unteren Bereich vom "CSS Modal" Tutorial habe ich doch extra eine Art Cookie erstellt (Local Storage).

Damit kannst Du das doch einmalig anzeigen, bzw. bis die Cookies gelöscht werden.

https://www.mobirise-tutorials.com/Lawy ... Modal.html

In meinem Tutorial steht das dafür:

Mit HTML5 Local Storage

Hier die gleiche Ausgabe zusätzlich mit einem local Storage, also einer Art Cookie um das Popup nur einmalig anzuzeigen, bis die Cookies am Browser gelöscht werden, die ich hier an den Links zum Popup gleich selbst lösche, damit man das Fenster erneut sehen kann.

Ich habe hier ein local Storage JavaScript von Werner-Zenk.de etwas abgewandelt verwendet, das über die Funktion "akzeptieren()" am Button "Mit Cookie schließen" im Popup das Cookie aktiviert und sich dabei auf die id="dsvgo_hinweis" bezieht:

Code: Alles auswählen

<!-- Beginn Anzeige vom Modal -->
<a href="javascript: myModal();">Modal-Fenster öffnen</a>
<div id="dsgvo_hinweis">
 <div id="openModal" class="modalDialog">
  <div>
  <a href="#close" title="Schließen" class="close">X</a>
  <h1>Modal-Fenster</h1>
  <p>Dies ist ein modales Fenster, das mit HTML5 und CSS3 erstellt wurde.</p>
  <p><a href="javascript:akzeptieren();" class="btn btn-primary btn-sm">Mit Cookie schließen</a></p>
  </div>
 </div>
</div>
<!-- Ende Anzeige vom Modal -->

Das JavaScript zur Funktion "akzeptieren()" gehört in die Seiteneinstellungen in den Bereich "Inside <head> code":

Code: Alles auswählen

<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>

Das ein Popup-Modal beim wiederholten Aufruf der gleichen Seite immer wieder angezeigt wird ist ja auch vollkommen richtig. Das tut ja jedes Mobirise-Popup auch - Beispiel hier:

https://www.mobirise-tutorials.com/Tuto ... Popup.html

Wenn man das nicht will, dann sperrt man das Modal eben über einen Cookie wie oben beschrieben.

Sicherlich gibt es auch noch die Möglichkeit das Popup nur während einer Browser-Sitzung "SESSION" einmalig zu zeigen.

Da müsste man ein anderes JavaScript haben - vielleicht schreibt Dir Werner das.

... ich kenne mich mit JavaScript nicht aus - aber ich denke Du müsstest das:

window.localStorage.setItem("DSGVO", "true");

mit dem ersetzen (einfach mal ausprobieren):

window.sessionStorage.setItem("DSGVO", "true");

Eine SESSION Storage gilt aber immer nur für das gleiche Browser-Fenster.

Hallo Tommy,

leider komme ich immer noch nicht klar. Ich habe jetzt die einfachere Variante gewählt, so dass sich das Popup-Modal automatisch öffnen soll und der Klick mich Button nicht mehr erscheint.

In das HTML habe ich folgendes eingetragen

Code: Alles auswählen

!-- Modal -->
<div class="modal fade" id="exampleModalButton" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal Titel</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="false">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Das ist der Body von diesem <b>Modal</b></p><p>
      </p></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
        <!-- <button type="button" class="btn btn-primary">Button</button> -->
      </div>
    </div>
  </div>
</div>

wobei ich lediglich das hier (Klick mich Buton) raus genommen habe:

Code: Alles auswählen

<!-- Button Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalButton">
  Klick mich
</button>

Dann das in CSS:

Code: Alles auswählen

.modal-content {
  max-height: 300px;
  overflow-y: auto;
}

und das bei End of Body:

Code: Alles auswählen

script>
    $(window).load(function() {
        $('#exampleModalTextLink').modal('show');
    });
</script>

Der Klick mich Button ist jetzt zwar weg, aber das Modal öffnet sich bei Aufruf der Seite nicht.

Ja, stimmt.

Das JavaScript funktioniert zum automatischen Öffnen nicht mehr. Keine Ahnung warum. Das habe ich vielleicht vor 5 Jahren eingebaut und habe jetzt keine Zeit mich darum zu kümmern. Auf Anhieb sehe ich keinen Fehler und es geht auch, wenn ich auf den "Text-Link" klicke - obwohl dann auch nur die Seite neu geladen wird.

Verstehe es gerade nicht - vielleicht hat sich da die Bootstrap-Version auch geändert.

Ich habe mich auch seit vielen Jahren damit gar nicht mehr beschäftigt und auch nicht wirklich Lust dazu, denn es gibt ja fast genauso lange jetzt die Erweiterung "Popup Builder" von Mobirise, die ich seither nur noch verwende.

Ich glaube ich hatte das damals hier gefunden:

https://stackoverflow.com/questions/102 ... -page-load

Versuche es mal mit dem "CSS Modal" vom Werner.

Hallo,

ich habe es jetzt mit dem CSS-Modal von Werner Zenk umgesetzt.

Hier http://www.online2web.de ist eine Testseite

Was ich bisher nicht rausgekriegt habe ist, wo ich im CSS-Editor die Linkfarbe zum Datenschutz ändern kann

Irgendwas habe ich falsch gemacht, auf dem PC ist alles ok, auf dem Handy Schrott

Ich habe bisher nur am Handy gucken können, da sieht alles prima aus.

... ich kann erst morgen richtig gucken.

struggle hat geschrieben: Do 12. Jan 2023, 18:21
Was ich bisher nicht rausgekriegt habe ist, wo ich im CSS-Editor die Linkfarbe zum Datenschutz ändern kann

Kannst Du auch direkt an den Link schreiben

Code: Alles auswählen

<p> <a href="http://www.online2web.de/datenschutz.html" style="color: #8ebf42">Datenschutzhinweise</a>.</p>

Super, Dankeschön

Aber Du willst mit dem Popup Fenster keinen Cookie Banner basteln - oder ?
Dafür gibt bessere Scripte

Mobirise-Tutorials.com

Mobirise4 / Popup-Fenster

Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster

Re: Mobirise4 / Popup-Fenster