Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Popups for Divi: Example with all WordPress configuration options
add_filter( 'evr_divi_popup-js_data', 'my_divi_popup_options' );
function my_divi_popup_options( $config ) {
// The z-index of thathe visible popup layer.
$config['zIndex'] = 100000;
// Animation speed of the fade in effect.
$config['animateSpeed'] = 400;
// -- Following options are not needed in most cases --
// With this you can use a different class instead of "is-modal"
// that prevents popups from closing when background layer is clicked.
$config['modalIndicatorClass'] = 'is-modal';
// Different class name to trigger the exit-intent behavior.
$config['exitIndicatorClass'] = 'on-exit';
// CSS Selector that identifies a popup. Useful when
// using a different theme or a plugin already uses the "popup" class.
$config['popupSelector'] = '.popup';
// Responsive Integration.
$config['fullWidthClass'] = 'popup_full_width';
// Responsive Integration.
$config['fullHeightClass'] = 'popup_full_height';
// Class that is added to the body tag, while a popup is visible.
// Default class disables scrolling and adds a minor blur effect
$config['openPopupClass'] = 'evr_popup_open';
// CSS Klasse of the backgroung Overlays.
$config['overlayClass'] = 'evr_fb_popup_modal';
// You can open a popup via a special data-attribute, instead of the href
// value. The default attribute for this is "data-popup" and opens the
// defined popup when clicking the element with the data attribute.
// Eg: Open popup
$config['idAttrib'] = 'data-popup';
// New since version 1.1.0
// This class is added to the top most (active) popup. It allows
// you to style inactive popups or apply effects.
$config['classActivePopup'] = 'is-open';
// This changes the default close-button state when a popup does
// not specify noCloseClass or withCloseClass
$config['defaultShowCloseButton'] = true;
// Add this class to the popup section to hide the close button
// in the top right corner.
$config['noCloseClass'] = 'no-close';
// Add this class to the popup section to show the close button
// in the top right corner.
$config['withCloseClass'] = 'with-close';
// This is the class-name of the close button that is
// automatically added to the popup. Only change this, if you
// want to use existing CSS or when the default class causes a
// conflict with your existing code.
// Note: The button is wrapped in a span which gets the class-
// name `closeButtonClass + "_wrap"` e.g. "evr-close_wrap"
$config['closeButtonClass'] = 'evr-close';
return $config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.