Der beliebte DIVI Builder und das DIVI Theme bieten zahlreiche Funktionen und Module. Leider muss man sich aber bei manchen Funktionen noch selbst helfen. Wie zum Beispiel beim Einbinden von Popups oder Modal Windows.
Schritt 1 - eigenen JavaScript code in DIVI integrieren : DIVI > Theme Options > Integration hier den Header-Code aktivieren und den folgenden Code in den Kasten "Code dem < head > Ihres Blogs hinzufügen":
<script>(function( $ ){
$('a.popup').live('click', function(e) {
e.preventDefault();
var $this = $(this);
var id_element = '#popup-community';
if ($this.data('popup-id') !== 'undefined') {
id_element = $this.data('popup-id');
}
$.magnificPopup.open({
items: {type: 'inline',
src: id_element
}
},0 );
return false;
});
})( jQuery );
</script>
Im zweiten schritt kommt CSS Dazu. Wir wollen ein Popup "contactform" in einem Modal darstellen. Also brauchen wir folgenden CSS-Code:
/*** CSS ***/
#contactform{display: none;}
.mfp-content #icontactform{ display: block; }
.mfp-content {
background-color: #FFF;
height: auto;
max-width: 800px;
padding: 15px;
border-radius: 10px;
}
Im letzten Schritt muss in der Seite ein neues "CODE-Modul" hinzugefügt werden. Da hinein kommt unser Modal und der Link zum Öffnen:
Fertig.
