DiviArea.show(area, event)

Open the Area with the given ID. When an animation is defined for the area, the animation will start to play.

Popup Areas: When the Popup is already open, it will be brought to the front. This function also dims the background and disabled document scrolling, by calling DiviArea.showOverlay().


area string|jQuery|DiviAreaItem, required
Identifies the Area to display.
Either a string with the Area-ID (the #-prefix is optional), the Areas jQuery element, or the DiviAreaItem.
event Event|jQuery, required
Required for Hover Areas.
It specifies the element against which the Hover Area is positioned. Ignored for any other Area type.


The function returns true, if the area exists and was displayed. When the return value is false, a debug output describes the reason.


// The "#" prefix is optional. Following statements are identical:
// The <id> param can also be the jQuery element of the Area:
var demo = DiviArea.register('#sample');
// Display a Hover Area relative to an <a> tag (Divi Areas Pro only):
jQuery('a').on('mouseenter', function(event) {
    DiviArea.show('#hover-area', event);


This function was previously named DiviPopup.openPopup().

Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Get in touch with us