Wie Sie Ihrem Formular ein modales Popup hinzufügen

Modale Fenster können verwendet werden, um Anzeigen, Nachrichten oder zusätzliche Informationen anzuzeigen. Diese Anleitung zeigt, wie Sie ein modales Pop-up-Fenster in Ihrem Formular implementieren können.

Sehen Sie sich dieses Demoformular an, um zu sehen, wie es aussieht.

So erstellen Sie ein modales Fenster

1. Fügen Sie im Formular-Generator ein Textabsatz-Element zu Ihrem Formular hinzu.
2. Wählen Sie im Absatzeditor oben Quellcode („>_“) aus.

3. Fügen Sie den folgenden HTML-Code in den Quellcode-Editor ein:

<p><a class="button" href="#open" rel="nofollow">Hier Klicken!</a></p>
<div id="open" class="modalBox">
<div>
<p><a class="close" title="Close" href="#close" rel="nofollow">X</a></p>
<h2>Hallo Zusammen!</h2>
<p>Hier ist ein modales Fenster.</p>
<p>Sie können diese mit Ihrer eigenen Nachricht versehen.</p>
</div>
</div>

4. Bearbeiten Sie die hervorgehobenen Texte nach Ihren Wünschen.
5. Wählen Sie für das CSS das Farbroller-Symbol im rechten Fensterbereich, um den Formular-Designer zu öffnen.
6. Gehen Sie im rechten Bereich oben auf Stile.
7. Scrollen Sie nach unten zum Abschnitt Eigenes CSS einfügen .

8. Fügen Sie den folgenden CSS-Code ein:

/* Main Box Content */
.modalBox {
position:fixed;
font-family: Arial, Helvetica,sans-serif;
top:0;
right:0;
bottom:0;
left:0;
background: rgba(0,0,0,0.8);
color:black;
z-index:99999;
opacity :0;
-webkit-transition:opacity 400ms ease-in;
-moz-transition:opacity 400ms ease-in;
transition:opacity 400ms ease-in;
pointer-events:none;
}
/* Style for target elements */
.modalBox:target {
opacity: 1;
pointer-events: auto;
}
/* Positioning of the child box */
.modalBox>div {
width:400px;
position:relative;
margin:10% auto;
padding:5px 20px 13px 20px;
border-radius:0px;
background:white;
}
/* Positioning and style of the close button */
.close {
background:white;
color:black;
line-height:25px;
position:absolute;
right:1px;
text-align:center;
top:1px;
width:35px;
text-decoration:none;
font-weight:bold;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:none;
border:none;
}
/* Style when mouse hovers on the close button */
.close:hover {
background:black;
color:white;
}
/* Default style of the open button */
.button {
background-color:black;
border:none;
color:white;
padding:2px 10px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px 2px;
cursor:pointer;
}

9. Wenn Sie fertig sind, wählen Sie unten Speichern aus.

Weitere Informationen zum Hinzufügen von CSS-Code zu Ihrem Formular finden Sie unter Wie Sie benutzerdefinierte CSS Codes einfügen.

Sie haben jetzt ein modales Fenster in Ihrem Formular. Wenn Sie #open an Ihre Formular-URL anhängen, wird das modale Fenster automatisch geöffnet, wenn das Formular geladen wird: 

https://form.jotform.com/231981838534971#open

Hängen Sie bei eingebetteten Formularen #open an das SRC Attribut des IFrames an, um das modale Fenster automatisch zu öffnen, wenn die Seite geladen wird.