Modal für Mobirise 4

Allgemeine Fragen
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Hallo,

in Tommys Tutoriál sind ziemlich viele Anleitungen zum Einbau eines Modals vorhanden, ich blicke nicht mehr durch.

Was ich benötige, ist ein etwas größeres Modal für die Anzeige eines Bildes. Geöffnet werden soll es mit einem Textlink und geschlossen mit einem Button. Sowohl am PC als auch auf dem Handy. Der Texteditor ist vorhanden.

Ich bitte um eine Enpfehlung !
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

Moin,

na dafür hat Mobirise doch die Erweiterung "Popup Builder". Da kannst Du die Größe vom Popup doch wählen.

Klicke mal hier auf die erste Kachel "Text und Bild":

https://www.mobirise-tutorials.com/Busi ... tures11-6e

Ist es das was Du willst? Das geht auch größer - wie z.B. an der letzten Kachel "Popup groß mit Bild".

Auf der Seite findest Du auch Beispiel-Code für einen Button zum Schließen und vieles mehr. Frage dann im Einzelnen.
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Hallo Tommy,

in meiner Überschrift nannte ich Mobirise4. Den PopupBuilder habe ich nicht.

In Deinen Anleitungen ist mal von Bootstrap Modal, mal von CSS und auch von HTML5 die Rede. Mich verwirrt das.

Noch mal, was wichtig ist:

Modal für ein Bild.
Textlink zum Öffnen.
Button zum Schliessen.
Nutzbar am PC und Handy.

So in der Art, wie dies hier:
modalgross.PNG
Den Code-Editor habe ich

Ich bitte um eine Empfehlung für das geeignete Modal !
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

... na dann musst Du ein Modal händisch einbauen - hier habe ich vor langer Zeit ein Beispiel mit Tutorial für "Mobirise4" erstellt (da warst Du schon auf der richtigen Seite von mir):

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

... das habe ich nach diesem "Bootstrap-Modal" Beispiel getan:

https://getbootstrap.com/docs/4.0/components/modal/

Das "CSS-Modal" von unserem Werner-Zenk.de wäre auch eine Alternative:

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

Beides ist ungefähr gleich vom Aufwand, wobei sich bei Mobirise natürlich eher das "Bootstrap-Modal" anbietet.

... ich kann erst morgen wieder helfen, da ich jetzt weg muss ...
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Hallo Tommy,
die von Dir oben genannten, verlinkten Seiten habe ich mir wieder und wieder angeschaut, aber es gibt dort kein einziges Code-Beispiel für ein Modal zum Öffnen eines Bildes. Es gibt ein kleines, ein großes eins zu scrollen, eins mit Raster, aber keins für ein Bild.
Gruss
Reinhard
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Volker »

Schau hier in den Quelltext und Du kannst Dir sowas in MR bauen.

https://360p.eu/modal.html
Gruß Volker
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Das mach, danke. Die Idee hatte ich auch schon bei Tommys Tutorial. Dort habe ich mir beim modal 1-3 den Quelltext rausgesucht und damit "rumgespielt"
Gruss
Reinhard
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Volker »

Hier eine kurze Anleitung für Dich

Das kopierst Du in die Seiteneigenschaften unter inside <head> code:

Code: Alles auswählen

<!-- Skript zum Aufruf der Anker ID vom Modal -->
<script>
      function myModal() {
      window.location.href = '#openModal';
      }
</script>
Das ist Dein Linktext, den Du in einem beliebigen Artikel Block einfügen kannst:

Code: Alles auswählen

<a href="javascript: myModal();" class="text-primary">Dein Text.</a></p>
In den gleichen Block gibst Du unten zum Schluss den Pfad zu Deinem Bild an.

Code: Alles auswählen

<div id="openModal" class="modalDialog">
 <div>
  <a href="#close" title="Schliessen" class="close">X</a>
       <div align="center"><img src="https://360p.eu/magix.png" width="702" height="574"></div>
  </div>
Auf der rechten Site im CSS Editor folgendes:

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: 702px;
  position: relative;
  margin: 10% Auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background-color: #FFFFFF;
  background: linear-gradient(#ffffff, #999999);
  cursor: Default;
}
.close {
  background-color: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: Absolute;
  right: -12px;
  text-align: Center;
  top: -10px;
  width: 24px;
  text-decoration: None;
  font-weight: Bold;
  border-radius: 12px;
  box-shadow: 1px 1px 3px #000000;
}
.close:hover {
  background-color: #00D9FF;
}
Sieht dann so aus:

https://360p.eu/test07/
Gruß Volker
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Ganz toll, Dankeschön :tu:
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

Moin,
struggle hat geschrieben: Di 14. Mär 2023, 18:18 ... es gibt dort kein einziges Code-Beispiel für ein Modal zum Öffnen eines Bildes.
wieso gibt es da kein "Code Beispiel" ? Ein Bild hat doch erst einmal nichts mit einem Modal-Code zu tun. Das ist doch nur der Inhalt (body) und wird wie jeder andere HTML-Inhalt mit dem Code für ein Bild erstellt, also dem HTML <img> Tag:

https://www.w3schools.com/tags/tag_img.asp

Ich kann ja nicht für jede mögliche Situation ein Beispiel auf meinen Seiten erstellen - vielleicht will ja jemand ein Video oder auch ein PDF dort anzeigen oder sonst etwas.

Will man nun nur ein Bild darstellen, dann ersetzt man meinen Beispieltext im <p> Tag </p> mit seinem Bild - also seinem <img> Tag oder schreibt den Code für sein Bild noch dazu. Das sollte aber eigentlich schon klar sein.

Da steht doch ein Beispiel für den Modal-Code direkt mitten auf meiner Seite:

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

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>

Aber das CSS-Modal Beispiel von Volkers Beispiel kannst Du natürlich ebenso verwenden (danke Volker) - aber auch auf dieser Seite von mir steht doch genau das Beispiel, das Volker hier gepostet hat - das hat er doch von meiner Seite :confused:

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


... wobei das Modal in der Größe etwas zu tief sitzt - an meinem Laptop mit einer Bildschirmauflösung von 1600 x 900 Pixeln ist nicht das gesamte Modal sichtbar (man darf bei so etwas nicht nur an den eigenen Bildschirm denken):


Modal von Volker.jpg



Das kann man mit einem kleineren Außenabstand anpassen, hier z.B. mit 2% anstatt 10%:

margin: 2% Auto;


Modal Volker margin klener.jpg



Prüfe auch die Anzeige am Handy, denn das Beispiel vom Volker ist so noch nicht für das Handy geeignet. Zu breit und zu hoch. Da muss man dann dem <img> Tag noch eine maximale Breite geben, wie z.B.:

Code: Alles auswählen

img {
  max-width: 90%;
}

Ein "Bootstrap" Modal würde sich in diesem Fall selbst anpassen, das wäre insofern schon etwas einfacher gewesen.
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Hallo Tommy,
als ich meinte, es gäbe bei den von Dir verlinkten Seiten kein Beispiel für ein Modal für ein Bild, war nicht Deine Seite gemeint, sondern zwei andere Seiten. Ich schätze sehr Deine Arbeit und Deinen unermüdlichen Fleiß.
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

Moin,

sage mal - was mir noch auf Deiner Webseite aufgefallen ist, dass Du jede Menge Bilder unter "Lustiges" von "Ruthe-Cartoon" und noch Cartoons unter "Ausreden" zeigst.

Ich habe jetzt nicht danach gesucht, ob das vom Urheber so genehmigt ist oder darüber etwas gelesen.

Du weißt aber schon, dass man solche Bilder, ohne eine schriftliche Zustimmung des Urhebers, auf gar keinen Fall zeigen darf. Das wäre eine schlimme Copyright-Verletzung und kann Tausende kosten.

Wollte Dich lediglich darauf hinweisen.

Das gilt übrigens für alle Bilder, die man nicht selbst erstellt hat oder für die nicht explizit das Urheberrecht schriftlich abgetreten wurde oder eine entsprechende Lizenz bezahlt worden ist.
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Hallo Tommy, danke für den Hinweis !

Mit Ruthe habe ich mich mal vor vielen Jahren in Verbindung gesetzt, das sollte ich erneuern. Andere Bilder (mehrere Tausend) habe ich mal gekauft (BigBox of Art/Hemera) Das sind 21 CD-Roms. Da sind Bilder rund um die Welt, aber auch die Cartoons. Ansonsten habe ich noch Bilder von "Pexels", die frei sein sollen.
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

na denn - Hauptsache Du hast das alles auch geprüft :tu:
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Ich habe mal was ganz Verrücktes gemacht und an ChatGTI eine Anfrage gestellt:

Schreibe mir in HTML ein bootstrap modal zur Anzeige eines Bildes https://www.immo4live.de/assets/images/ ... ewerke.jpg

Antwort von ChatGTI

Gerne helfe ich Ihnen dabei, ein Bootstrap-Modal in HTML zur Anzeige eines Bildes zu erstellen. Hier ist ein Beispiel-Code:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Modal Beispiel</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

<!-- Button, um das Modal zu öffnen -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Bild anzeigen
</button>

<!-- Das Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Bild</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <img src="https://www.immo4live.de/assets/images/kostengewerke.jpg" class="img-fluid">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
      </div>

    </div>
  </div>
</div>

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>
</html>
In diesem Beispiel haben wir ein Button mit der Klasse "btn btn-primary" erstellt, der das Modal öffnet. Das Modal selbst ist innerhalb eines div-Tags mit der Klasse "modal fade" platziert und wird über das Attribut "data-target" im Button geöffnet. Der Inhalt des Modals besteht aus einem Header mit einem Titel, einem Body, der das Bild enthält, und einem Footer mit einem Schließen-Button. Das Bild selbst wird mit der Klasse "img-fluid" versehen, damit es innerhalb des Modals korrekt dargestellt wird.
Ich hoffe, das hilft Ihnen weiter!

UND ES FUNKTIONIERT :D
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

Ja - das habe ich auch schon mehrfach mit dieser künstlichen Intelligenz "ChatGPT" ausprobiert. Es ist schon fast beängstigend, was das leisten kann - unheimlich :eek:
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Hallo, ich brauche doch noch mal Hilfe !

Es geht um folgende Seite:

https://www.immo4live.de/tipps.html

Wenn ich dort "Leistung bezahlen" öffne, erscheint unten ein Link zu einer PDF. Nun ist es ja so, daß man die PDF am PC öffnen kann, am Handy geht das nicht, da müßte man sie erst runterladen.

Nun habe ich mir gedacht,daß man statt einer PDF ein Modal mit einem entsprechendem Bild öffnen könnte.

Dazu habe ich Chat GPT bemüht:

Schreibe mir in HTML ein bootstrap modal zur Anzeige eines Bildes https://www.immo4live.de/assets/images/ ... ewerke.jpg

Antwort:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Modal Beispiel</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

<!-- Button, um das Modal zu öffnen -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Bild anzeigen
</button>

<!-- Das Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Bild</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <img src="https://www.immo4live.de/assets/images/kostengewerke.jpg" class="img-fluid">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
      </div>

    </div>
  </div>
</div>

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>
</html>
In diesem Beispiel haben wir ein Button mit der Klasse "btn btn-primary" erstellt, der das Modal öffnet. Das Modal selbst ist innerhalb eines div-Tags mit der Klasse "modal fade" platziert und wird über das Attribut "data-target" im Button geöffnet. Der Inhalt des Modals besteht aus einem Header mit einem Titel, einem Body, der das Bild enthält, und einem Footer mit einem Schließen-Button. Das Bild selbst wird mit der Klasse "img-fluid" versehen, damit es innerhalb des Modals korrekt dargestellt wird.
Ich hoffe, das hilft Ihnen weiter!


Nun ist es so, egal wo ich den Code einfüge, immer zerhaut es mir die Seite.
seite2.PNG
seite3.PNG
Dabei sollte da, wo bisher der Link zur PDF ist, einen Button sein.
Leistung.png
Ich weiß nicht mehr weiter und brauche bitte Hilfe !
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

Moin,

es ist doch vollkommen richtig, dass ein PDF am Handy zunächst heruntergeladen wird, bevor es geöffnet werden kann. Das könntest Du also auch genau so lassen.

Gucke mal - hier hatte ich das gleiche Problem, da ich in diesem Tutorial den Quellcode meines Formulars als PDF-Datei anzeigen wollte:

https://www.mobirise-tutorials.com/Form ... content6-r

Ich habe mich dazu der sehr brauchbaren Media-Abfrage (Media Query) bedient, mit der man die Größe des Bildschirms abfragen kann.

Ich öffne also am Desktop immer gleich das PDF auf der Seite und am Handy schreibe ich nur einen Link zum PDF dort hin, denn sonst würde am Handy direkt diese Abfrage zum Download für das PDF erscheinen. Das fand ich eben auch blöd.



Für das Bootstrap-Modal mit Bild hatte ich Dir doch auch den Link zu meiner Beispielseite geschrieben:

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

... das ist doch genau das gleiche Skript wie es Dir "ChatGPT" geschrieben hat - wahrscheinlich bei mir abgeschrieben :D

Du benötigst ja nur den Code für das Modal, der Rest des Codes von "ChatGPT" betrifft ja die HTML-Seite selbst und auch die Links zu Bootstrap usw., das ist ja alles bereits bei Dir - in einer Mobirise-Seite - vorhanden.



Hier mal mein Code als Beispiel für einen Textlink zum Modal, den Du direkt im Akkordeon, anstelle des Link zum PDF einbaust, also noch vor dem schließenden </p> Tag, damit die Bootstrap-Klassen wirken können:

Code: Alles auswählen

<!-- Text-Link kommt irgendwo auf die Seite -->
<a href="javascript: void();" data-toggle="modal" data-target="#Bild1">Gewerk, Material, Lohnkostentabelle</a>


... wolltest Du lieber einen Button, anstelle eines Textlinks, hier der Code für einen Button. Der würde ebenso an die gleiche Stelle kommen. Aber bitte nicht beides, da hier eine ID angesprochen wird, müsste diese sonst unterschiedlich sein:

Code: Alles auswählen

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


Das Modal selbst kopierst Du direkt darunter, da <div> Container nicht innerhalb von <p> Tags </p> stehen dürfen, also unter das schließende </p> Tag:

Code: Alles auswählen

<!-- Beginn Modal mit id="Bild1" -->
<div class="modal fade" id="Bild1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="height: auto;">
    
      <div class="modal-header">
        <h5 class="modal-title">Kostengewerke</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="false">×</span>
        </button>
      </div>
      
      <div class="modal-body">
        <img src="https://www.immo4live.de/assets/images/kostengewerke.jpg" class="img-fluid">
      </div>
      
      <div class="modal-footer">  
        <!-- Diese Zeile mit dem Button zum Schließen bei Bedarf deaktivieren oder löschen -->
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
      </div>
      
    </div>
  </div>
</div> 
<!-- ENDE Modal -->



Ein wenig CSS für das Modal kopierst Du noch in den Bereich "CSS Editor" vom "Code Editor" im gleichen Block:

Code: Alles auswählen

.modal-content {
  height: auto;
  max-height: 800px;
  overflow-y: auto;
}
... wobei ich hier nur als Beispiel die Höhe vom Modal auf 800px begrenzt habe, das können auch 300px oder sonst etwas sein. Es entsteht dann im Modal ein vertikaler Scrollbalken. Das kannst Du aber auch ganz entfernen, dann wird sich die Höhe vom Modal automatisch der Größe des Inhaltes (hier also Bild) anpassen. Die Breite vom Modal passt sich über Bootstrap-Klassen an.

Lies auch mal ein wenig in der "Bootstrap 4" Anleitung zum Modal:

https://getbootstrap.com/docs/4.2/components/modal/
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Modal für Mobirise 4

Ungelesener Beitrag von struggle »

Nochmals vielen Dank für die ausführliche Erklärung !

Ich habe mein Vorhaben umgesetzt und statt des Link zum PDF ein Textlink zum Modal eingefügt. Das Ganze für zwei Modals

https://www.immo4live.de/tipps.html

- Eigenleistung
- Leistung bezahlen

Jetzt werde ich die aufgerufenen Bilder noch anpassen, damit sie im Modal vernünftig aussehen.

Für das Handy ist der Weg mit dem Modal allemal besser als der Weg mit dem PDF, ich bin zufrieden.
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Modal für Mobirise 4

Ungelesener Beitrag von Tommy Herrmann »

Moin,

na bestens :tu:

... ich würde ja da auch nicht so einen riesen weißen Rand um die Fotos stehen lassen, das macht ja nur das Foto kleiner.

Noch ein Tipp, den Du dabei vielleicht gebrauchen könntest.

Es gibt ja unterschiedliche Bootstrap-Klassen für unterschiedlich große Modals:
modal-sm ➡️ maximal 300px breit Default ➡️ maximal 500px breit (das verwendest Du zur Zeit) modal-lg ➡️ maximal 800px breit modal-xl ➡️ maximal 1.140px breit

Wenn Du also z.B. ein großes Modal, anstelle vom jetzigen Default-Modal, zeigen willst, dann schreibe noch diese Bootstrap-Klasse noch mit ran:

modal-lg

"lg" für "large" = "groß"

<div class="modal-dialog modal-lg" role="document">

... man kann mehrere CSS-Klassen aneinander reihen - also dann als gesamten Code so:

Code: Alles auswählen

<!-- Beginn Modal mit id="Bild1" -->
<div class="modal fade" id="Bild1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" style="height: auto;">
    
      <div class="modal-header">
        <h5 class="modal-title">Kostengewerke</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="false">×</span>
        </button>
      </div>
      
      <div class="modal-body">
        <img src="https://www.immo4live.de/assets/images/kostengewerke.jpg" class="img-fluid">
      </div>
      
      <div class="modal-footer">  
        <!-- Diese Zeile mit dem Button zum Schließen bei Bedarf deaktivieren oder löschen -->
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
      </div>
      
    </div>
  </div>
</div> 
<!-- ENDE Modal -->

Dann solltest Du Dir (nur für die Optik) vielleicht angewöhnen zusätzlichen Code, den Du über den "Code Editor" einfügst, auch einzurücken. Dazu markierst Du den gesamten Code mit der Maus (wie ich im Screenshot) und rückst diesen dann über die Tabulator-Taste ein.

Wenn man in den Quelltext guckt, sieht das sonst nicht gerade schön aus und Programmierer kriegen einen Schock, wenn sie so etwas sehen. Ich habe diesen Code in den Screenshots markiert:

Quelltext sollte richtig eingerückt werden.jpg


So etwa sollte es aussehen (Code von meiner Seite):

Quelltext richtig eingerückt.jpg


Man rückt ja unterschiedliche Bereiche eines Codes gerne ein, damit dieser übersichtlich und lesbar bleibt. Würde man das gar nicht tun, herrscht Chaos im Quellcode.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 23 Gäste