WordPress – Divi Popup

We have put together instructions on how to open a popup using a button.

1st CSS class

Assign a class to the “popup” button element

2. section and column classes

Add a section with the class name “popup-overlay”

Then insert the class name “popup-content” with something in the column.

Then add a text module for the close icon in the popup with content:

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

Then add modal text to add content to the popup and add your content.

3 Add CSS to custom CSS

.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;
}

Add jquery jQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren to show and hide the popup when clicking the button and the trigger button:

<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>

Adding two popups on one page

For this, all the above cssCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here ., jQuery jQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren and section with column and module must be duplicated.

1) Change class names

Button – popup2

Section – popup-overlay2

Column – popup-content2

Close button – x

I have removed jQuery jQuery is a fast, small and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation and Ajax much easier with an easy-to-use API that works in a variety of browsers. With a combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript. source mehr erfahren from this page and added it in Theme-Option->Integration, because if you duplicate the section every time, this code will also be duplicated and contradict each other.

<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: Deutsch (German)