Seite 1 von 1

Automatische generieren eines Modal Popup Fenster

Verfasst: Do 21. Jan 2021, 19:52
von Volker
Hallo zusammen,

ich schreibe hier, weil mir sonst kein Board eingefallen ist :D

Besteht theoretisch und natürlich auch praktisch eine Möglichkeit eines automatisierten Einbaus eines Modal Popup
in eine Webseite ?

Ich stelle mir folgendes vor :

Der Kunde hat auf seiner Seite mehrere Unterseiten mit seinen Fahrzeugangeboten.
Nun soll er eine Art Formularfeld haben, wo er eine URL eingeben kann. Diese soll dann
in einem Popup mit Iframe eingebunden sein und das Popup soll dann mittels Button auf dieser Unterseite aufrufbar sein.

Versteht Ihr was ich meine ?

Nehmt das Beispiel mobile.de - da kann der Kunde ja seine Fahrzeuge eingeben, Bilder hoch laden usw.
Nun noch da ein Feld : URL eingeben und dann wird ein Button generiert an vorher definierter Position und der ruft das Popup mit der URL auf.
Genial oder ? :D

Re: Automatische generieren eines Modal Popup Fenster

Verfasst: Fr 22. Jan 2021, 05:53
von Tommy Herrmann
Moin,

da Du grundsätzlich mit "Mobirise" arbeitest, verschiebe ich das Thema mal in das allgemeine Mobirise-Board.

Grundsätzlich kannst Du so ein Popup entweder über Link/Button oder auch automatisch beim Seitenaufruf öffnen lassen.

Wie Du allerdings mit einer neuen noch unbekannten URL eine Seite aufrufen willst, die es noch gar nicht gibt, weiß ich nicht. Da müsste es ja dann so eine Arte Seiten-Generator geben, der eine HTML-Seite vollkommen automatisch generiert - keine Ahnung wie so etwas realisierbar sein sollte :confused:

Entscheidend ist ja dann wohl weniger das Popup-Fenster als der Inhalt, der dann automatisch generiert werden soll. Ich habe nicht die geringste Ahnung wie man so etwas machen könnte.

Man könnte vielleicht so eine Art Standard-Popup gestalten und dann nur bestimmte Inhalte aus der Mail mittels POST oder GET via PHP-SESSION übernehmen.

Ich hatte so etwas mal mit NOF gemacht:

http://www.tommyherrmanndesign.com/nof/Formular-MLR/

Vielleicht hat ja unser Werner das genau verstanden und Lust so etwas zu erstellen :D


Unten mal einige Möglichkeiten für Popup-Fenster, denn ich weiß nicht ob Dir diese bereits alle bekannt sind.


Mobirise Popup-Fenster als Erweiterung "Popup-Builder":

https://mobirise-tutorials.com/Business ... ilder.html


Gucke Dir auch diese CSS-Variante vom Werner an, bei Bedarf mit Cookie zum einmaligen Öffnen:

https://mobirise-tutorials.com/LawyerM4 ... Modal.html


... oder auch diese Bootstrap-Variante:

https://mobirise-tutorials.com/PortfolioM4/Modal.html


Natürlich kann man auch die alte JavaScript-Methode anwenden:

https://wiki.selfhtml.org/wiki/JavaScript/Window

Re: Automatische generieren eines Modal Popup Fenster

Verfasst: So 24. Jan 2021, 09:46
von Werner-Zenk.de
Vielleicht etwa so: ...
Wenn ein Eintrag in der Auswahlliste ausgewählt wird, öffnet sich ein Popup in dem sich ein iFrame befindet. Es wird dann im iFrame das ausgewählte Angebot (Seite) angezeigt.

Re: Automatische generieren eines Modal Popup Fenster

Verfasst: So 24. Jan 2021, 09:54
von Volker
Sehr gut Werner !!!!

Das kommt dem schon verdammt Nahe.

Ist das Script schon auf Deiner Seite verfügbar ?

Re: Automatische generieren eines Modal Popup Fenster

Verfasst: So 24. Jan 2021, 10:01
von Werner-Zenk.de
Ja, hier:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Fahrzeuge</title>

<style>
div#overlay {
 background-color: rgba(0, 0, 0, 0.15);
 visibility: Hidden;
 position: Fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 1000;
}

figure#figure {
 position: Absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

span#close {
background: red;
 cursor: pointer;
 padding: 3px;
}

iframe#fenster {
 width: 500px;
 height: 500px;
 border: Dotted 10px #FFD700;
}
</style>


<script>
function anzeigen(seite) {
 document.getElementById("overlay").style.visibility = "visible";
 document.getElementById("fenster").src = seite;
}

function closeWindow() {
 document.getElementById("overlay").style.visibility = "hidden";
}
</script>

 </head>
<body>

<select onChange="anzeigen(this.value)">
 <option>Bitte auswählen</option>
 <option value="kunde/angebot1.htm">Fahrzeugangebot 1</option>
 <option value="kunde/angebot2.htm">Fahrzeugangebot 2</option>
 <option value="kunde/angebot3.htm">Fahrzeugangebot 3</option>
</select>

<div id="overlay">

<figure id="figure">
 <p><span id="close" onClick="closeWindow()">Schließen</span></p>
 <iframe id="fenster"></iframe>
</figure>

</div>

</body>
</html>