jQuery Popup Overlay

jQuery plugin for responsive and accessible modal windows and tooltips

Download View project on GitHub

Currently v1.7.10

Demo

Basic Fade Fade & scale Active background Tooltip

Features

Usage

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site Title</title>
</head>
<body>

  <!-- Add an optional button to open the popup -->
  <button class="my_popup_open">Open popup</button>

  <!-- Add content to the popup -->
  <div id="my_popup">

    ...popup content...

    <!-- Add an optional button to close the popup -->
    <button class="my_popup_close">Close</button>

  </div>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.10/jquery.popupoverlay.js"></script>

  <script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#my_popup').popup();

    });
  </script>

</body>
</html>

Options

Name Type Default Description
type 'overlay'
'tooltip'		 'overlay' Sets popup type to overlay or tooltip.
autoopen boolean false Shows the popup when initialized.
scrolllock boolean false Disables scrolling of background content while the popup is visible.
background boolean true Enables background cover.
Disabled for tooltips.
backgroundactive boolean false Disable background cover and keep background elements active.
Implies background, blur and scrolllock to false
color string (CSS color) '#000' Sets background color.
opacity float 0.5 Sets background opacity.
horizontal 'center'
'left'
'right'
'leftedge'
'rightedge'		 'center'

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`).
vertical 'center'
'top'
'bottom'
'topedge'
'bottomedge'		 'center'

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`).
offsettop number 0

Sets top offset to tooltip.
offsetleft number 0

Sets left offset to tooltip.
escape boolean true Closes the popup when Escape key is pressed.
blur boolean true Closes the popup when clicked outside of it.
setzindex boolean true Sets default z-index to the popup (2001) and to the background (2000).
autozindex boolean false

Sets highest z-index on the page to the popup.
keepfocus boolean true Lock keyboard focus inside of popup. Recommended to be enabled.
focuselement string (CSS selector) '#{popup_id}' Enables you to specify the element which will be focused upon showing the popup. By default, the popup element #my_popup will recieve the initial focus.
focusdelay number 50 Sets a delay in milliseconds before focusing an element. This is to prevent page scrolling during opening transition, as browsers will try to move the viewport to an element which received the focus.
pagecontainer string (CSS selector)

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').
outline boolean false

Shows a default browser outline on popup element when focused.

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

Removes popup element from the DOM after closing transition.
openelement string (CSS selector) '.{popup_id}_open' Enables you to define custom element which will open the popup on click. By default, in our case it's set to .my_popup_open.
closeelement string (CSS selector) '.{popup_id}_close' Enables you to define custom element which will close the popup on click. By default, in our case it's set to .my_popup_close.
transition string (CSS 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;}
tooltipanchor object
JQuery or DOM object

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'
});

Callback events

Name Type Description
beforeopen function Callback function which will execute before the popup is opened.
onopen function Callback function which will execute when the popup starts to open.
onclose function Callback function which will execute when the popup starts to close.
opentransitionend function Callback function which will execute after the opening CSS transition is over, only if transition actually occurs and if supported by the browser.
closetransitionend function Callback function which will execute after the closing CSS transition is over, only if transition actually occurs and if supported by the browser.

Example:

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

Defaults

Default values for options and events can be modified.

Example:

$.fn.popup.defaults.transition = 'all 0.3s';
$.fn.popup.defaults.pagecontainer = '.container';

Methods

Name Description
.popup(options)

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

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

Manually opens a popup.

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

Manually hides a popup.

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

Manually toggles a popup.

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

 

Basic example

Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the Tab key.

You can close the dialog by pressing the Esc key, or by clicking on the background outside the content area, or by clicking on the Close button.

Fade example

$('#fade').popup({
  transition: 'all 0.3s',
  scrolllock: true // optional
});

Or you can set transitions directly in CSS:

$('#fade').popup();
#fade,
#fade_wrapper,
#fade_background {
  transition: all 0.3s;
}

Fade & scale example

$('#fadeandscale').popup({
  transition: 'all 0.3s'
});

#fadeandscale {
  transform: scale(0.8);
}
.popup_visible #fadeandscale {
  transform: scale(1);
}

Slide in example

$('#slide').popup({
  outline: true, // optional
  focusdelay: 400, // optional
  vertical: 'top' //optional
});


#slide_background {
  transition: all 0.3s 0.3s;
}
#slide,
#slide_wrapper {
  transition: all 0.3s ease-out;
}
#slide {
  transform: translateX(0) translateY(-40%);
}
.popup_visible #slide {
  transform: translateX(0) translateY(0);
}

Stand alone example

$('#standalone').popup({
  color: 'white',
  opacity: 1,
  transition: '0.3s',
  scrolllock: true
});


#standalone {
  transform: scale(0.8);
}
.popup_visible #standalone {
  transform: scale(1);
}

Active background example

You can click on any element at the background : they still active and won't close the popup.

You can close the dialog by pressing the Esc key, or by clicking on the Close button.

×

Tooltip example

Tooltip content will be positioned relative to the opening link.

Callback events

$('#fall').popup({
        beforeopen: function () {
            alert('beforeopen');
        },
        onopen: function () {
            alert('onopen');
        },
        onclose: function () {
            alert('onclose');
        },
        opentransitionend: function () {
            alert('opentransitionend');
        },
        closetransitionend: function () {
            alert('closetransitionend');
        }
    });

Other examples: