Popup Overlay - Responsive and accessible modal and tooltips

Sets horizontal position.

Options `leftedge` and `rightedge` can be used only for tooltips, and will align the tooltip to the left or right edge of the opening element (`openelement`).

Sets vertical position.

Options `topedge` and `bottomedge` can be used only for tooltips, and will align the tooltip to the top or bottom edge of the opening element (`openelement`).

Sets top offset to tooltip.

Sets left offset to tooltip.

Sets highest z-index on the page to the popup.

Sets a page container (to help screen reader users). Page container should be the element that surrounds all the content on the page (e.g. '.container' in the case of this very page).

It's highly recommended that you set the page container to help some screen readers read the modal dialog correctly. Doing so, when the popup is visible, aria-hidden="true" will be set to the page container and aria-hidden="false" to the popup, and vice-versa when the popup closes. You can set `pagecontainer` once per website (e.g. $.fn.popup.defaults.pagecontainer = '.container').

Shows a default browser outline on popup element when focused.

Setting to false is equivalent to #my_popup{outline: none;}.

Removes popup element from the DOM after closing transition.

Sets CSS transition when showing and hiding a popup.

Use this if you don't need separate transition for background, or different transition for opening and closing the popup, or if you need to transition only selected properties – otherwise set custom transitions directly in CSS.

Simple fade effect $('#my_popup').popup({transition: 'all 0.3s'}) is equivalent to #my_popup, #my_popup_wrapper, #my_popup_background {transition: all 0.3s;}

Setting fade effect for all popups on the site: $.fn.popup.defaults.transition = 'all 0.3s'; is equivalent to .popup_content, .popup_wrapper, .popup_background {transition: all 0.3s;}

Sets an element to be an anchor for tooltip position.

For example, for multiple opening links using the same tooltip on mouseover:

$('.my_popup_open').on({
    mouseenter: function(event) {
        $('#my_popup').popup({
            tooltipanchor: event.target,
            autoopen: true,
            type: 'tooltip'
        });
    },
    mouseleave: function() {
        $('#my_popup').popup('hide');
    }
});

Example:

$('#my_popup').popup({
  opacity: 0.3,
  transition: 'all 0.3s'
});

Example:

$('#my_popup').popup({
  onopen: function() {
    alert('Popup just opened!');
  }
});

Activates your content as a popup. Accepts an optional options object.

$('#my_popup').popup({
  background: false
});

Manually opens a popup.

$('#my_popup').popup('show');

Manually hides a popup.

$('#my_popup').popup('hide');

Manually toggles a popup.

$('#my_popup').popup('toggle');