Popups for Divi: Example with all WordPress configuration options

popups-for-divi-full-config.php

<?php
add_filter( 'evr_divi_popup-js_data', 'my_divi_popup_options' );

function my_divi_popup_options( $config ) {

	// -- Modify UI of popups --

	/**
	 * The base z-index. This z-index is used for the overlay, every
	 * popup has a z-index increased by 1:
	 */
	$config['zIndex'] = 100000;

	/**
	 * Speed of the fade-in/out animations. Set this to 0 to disable fade-in/out.
	 */
	$config['animateSpeed'] = 400;

	// -- Modify triggers and behavior --

	/**
	 * A class-name prefix that can be used in *any* element to trigger
	 * the given popup. Default prefix is 'show-popup-', so we could
	 * add the class 'show-popup-demo' to an image. When this image is
	 * clicked, the popup "#demo" is opened.
	 * The prefix must have 3 characters or more.
	 *
	 * Example:
	 * <span class="show-popup-demo">Click here to show #demo</span>
	 *
	 * @since 1.3.0
	 */
	$config['triggerClassPrefix'] = 'show-popup-';

	/**
	 * Alternate popup trigger via data-popup attribute.
	 *
	 * Example:
	 * <span data-popup="demo">Click here to show #demo</span>
	 */
	$config['idAttrib'] = 'data-popup';

	/**
	 * Class that indicates a modal popup. A modal popup can only
	 * be closed via a close button, not by clicking on the overlay.
	 */
	$config['modalIndicatorClass'] = 'is-modal';

	/**
	 * This changes the default close-button state when a popup does
	 * not specify noCloseClass or withCloseClass
	 *
	 * @since  1.1.0
	 */
	$config['defaultShowCloseButton'] = true;

	/**
	 * Add this class to the popup section to show the close button
	 * in the top right corner.
	 *
	 * @since  1.1.0
	 */
	$config['withCloseClass'] = 'with-close';

	/**
	 * Add this class to the popup section to hide the close button
	 * in the top right corner.
	 *
	 * @since  1.1.0
	 */
	$config['noCloseClass'] = 'no-close';

	/**
	 * Name of the class that closes the currently open popup. By default
	 * this is "close".
	 *
	 * @since 1.3.0
	 */
	$config['triggerCloseClass'] = 'close';

	/**
	 * Name of the class that marks a popup as "singleton". A "singleton" popup
	 * will close all other popups when it is opened/focused. By default this
	 * is "single".
	 *
	 * @since 1.4.0
	 */
	$config['singletonClass'] = 'single';

	/**
	 * CSS selector used to identify popups.
	 * Each popup must also have a unique ID attribute that
	 * identifies the individual popups.
	 */
	$config['popupSelector'] = '.et_pb_section.popup';

	/**
	 * Whether to wait for an JS event-trigger before initializing
	 * the popup module in front end. This is automatically set
	 * for the Divi theme.
	 *
	 * If set to false, the popups will be initialized instantly when the JS
	 * library is loaded.
	 *
	 * @since 1.2.0
	 */
	$config['initializeOnEvent'] = 'et_pb_after_init_modules'; // When Divi 3+ is detected, otherwise false.

	// -- CSS classes that control layout --

	/**
	 * All popups are wrapped in a new div element. This is the
	 * class name of this wrapper div.
	 *
	 * @since  1.2.0
	 */
	$config['popupWrapperClass'] = 'popup_outer_wrap';

	/**
	 * CSS class that is added to the popup when it enters
	 * full-width mode (i.e. on small screens)
	 */
	$config['fullWidthClass'] = 'popup_full_width';

	/**
	 * CSS class that is added to the popup when it enters
	 * full-height mode (i.e. on small screens)
	 */
	$config['fullHeightClass'] = 'popup_full_height';

	/**
	 * CSS class that is added to the website body when at least
	 * one popup is visible.
	 */
	$config['openPopupClass'] = 'evr_popup_open';

	/**
	 * CSS class that is added to the modal overlay that is
	 * displayed while at least one popup is visible.
	 */
	$config['overlayClass'] = 'evr_fb_popup_modal';

	/**
	 * Class that adds an exit-intent trigger to the popup.
	 * The exit intent popup is additionally triggered, when the
	 * mouse pointer leaves the screen towards the top.
	 * It's only triggered once.
	 */
	$config['exitIndicatorClass'] = 'on-exit';

	/**
	 * The parent container which holds all popups. For most Divi sites
	 * this could be "#page-container", but some child themes do not
	 * adhere to this convention.
	 * When a valid Divi theme is detected by the JS library, it will switch from
	 * 'body' to '#page-container'. To avoid this, simply use
	 *
	 * @since 1.3.0
	 */
	$config['baseContext'] = 'body';

	/**
	 * This class is added to the foremost popup; this is useful to
	 * hide/fade popups in the background.
	 *
	 * @since  1.1.0
	 */
	$config['activePopupClass'] = 'is-open';

	/**
	 * 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"
	 *
	 * @since  1.1.0
	 */
	$config['closeButtonClass'] = 'evr-close';

	/**
	 * Display debug output in the JS console.
	 *
	 * @since 1.3.0 Default value is WP_DEBUG. Before it, default was false.
	 */
	$config['debug'] = defined( WP_DEBUG ) ? WP_DEBUG : false;

	return $config;
}