WordPress – Divi Popup

wir haben eine Anleitung zusammengestellt, um ein Popup per Button zu öffnen.

1. CSS Klasse

Dem Schaltflächenelement “popup” eine Klasse geben

2. Abschnitts- und Spaltenklassen

Fügen Sie einen Abschnitt mit dem Klassennamen “popup-overlay” hinzu

Füge dann in der Spalte den Klassennamen “popup-content” mit etwas in die Spalte ein.

Füge dann ein Textmodul für das Schließen-Symbol im Popup mit Inhalt hinzu:

<span class="close-popup">x</span>

Fügen Sie dann modalen Text hinzu, um Inhalt im Popup hinzuzufügen und Ihren Inhalt hinzuzufügen.

3 CSS zum benutzerdefinierten CSS hinzufügen

.popup-overlay {
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: -1; 
    justify-content: center; 
    align-items: center;  
    opacity: 0; 
    overflow: hidden;
    transition: opacity 0.4s ease-in-out; 
    -moz-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
  background: rgba(0,0,0,0.9);
}

.popup-overlay.show {
	  display: flex; 
	  opacity: 1; 
    z-index: 99999; 
}

span.close-popup {
    color: #fff;
    position: absolute;
    top: -53px;
    right: -32px;
    font-size: 30px;
    cursor: pointer;
}

Füge jquery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren hinzu, um das Popup beim Klicken auf die Schaltfläche und die Schaltfläche zum Auslösen anzuzeigen und auszublenden:

<script>
jQuery(document).ready(function( $ ) {	
    $(document).on('click', '.popup', function(event){
    event.preventDefault();
    });		
});
</script>
<script>
jQuery(document).ready(function ($) {                           
	
	$(document).on('touchstart click', '.popup', function(event){            
	event.preventDefault();                                       
	$('.popup-overlay').addClass('show');                         
    });			
	
	$(document).on('touchstart click', '.popup-overlay', function(event){    
	$('.popup-overlay').removeClass('show');                      
	});
		
	$(document).on('touchstart click', '.popup-content', function(event){    
		event.stopPropagation();                                    
	});
		
	$('.close-popup').click(function(){
	  $('.popup-overlay').removeClass('show'); 
	});
});
</script>

Hinzufügen von zwei Popups auf einer Seite

Hierfür müssen alle oben genannten cssCSS (Cascading Style Sheets) heißt auf deutsch „Mehrstufige Formatvorlagen“. CSS ist eine Formatierungssprache für HTML-, SVG- und XML-Dokumente. Genutzt wird CSS um den Inhalt einer Webseite vom Design zu trennen! Weitere Infos dazu gibt es hier. mehr erfahren, jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren und Abschnitt mit Spalte und Modul dupliziert werden.

1) Klassennamen ändern

Button – popup2

Section – popup-overlay2

Column – popup-content2

Close button – <span class=“close-popup2″>x</span>

Ich habe jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren von dieser Seite entfernt und in Theme-Option->Integration hinzugefügt, denn wenn Sie den Abschnitt jedes Mal duplizieren, wird auch dieser Code dupliziert und widerspricht sich gegenseitig.

<script>
jQuery(document).ready(function( $ ) {		
    $(document).on('click', '.popup2', function(event){
    event.preventDefault();
    });		
});
</script>
<script>
jQuery(document).ready(function ($) {                           
	$(document).on('touchstart click', '.popup2', function(event){            
	event.preventDefault();                                       
	$('.popup-overlay2').addClass('show2');                         
    });			
	$(document).on('touchstart click', '.popup-overlay2', function(event){    
	$('.popup-overlay2').removeClass('show2');                      
	});	
	$(document).on('touchstart click', '.popup-content2', function(event){    
		event.stopPropagation();                                    
	});	
$('.close-popup2').click(function(){
  $('.popup-overlay2').removeClass('show2'); 
});
});
</script>

Dieser Beitrag ist auch verfügbar auf: English (Englisch)