# jQuery Popup Overlay

jQuery plugin for responsive and accessible modal windows and tooltips

Download View project on GitHub

Currently v1.7.6

## Demo

Basic Fade Fade & scale
Active background Tooltip

## Features

- Positioned with CSS: Overlays are horizontally and vertically centered with CSS, without any JavaScript offset calculations, therefore remain centered even if their height change.
- Suitable for responsive web design: Overlays are fully customizable with CSS and will adapt to any screen size and orientation. You can set a flexible minimum and maximum width and height to the overlay, as well as media queries.
- Always visible: If the height of the overlay exceeds the visible area, vertical scrolling will be automatically enabled to prevent the off-screen content from being unreachable.
- Accessible: Keyboard navigable using `Tab` key. WAI-ARIA roles are added automatically if missing. Text resizing or zooming will not break the layout, visibility, or position of the popup.
- Device independent: Works well on desktops, tablets, most modern phones and other devices. Optimized and tested in all modern browsers including IE7+, and in new versions of popular screen readers including JAWS, NVDA, and VoiceOver.
- Flexible and customizable: Supports multiple popup instances, custom CSS3 animations and transitions...

## 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="http://code.jquery.com/jquery-1.8.2.min.js"></script>

      <!-- Include jQuery Popup Overlay -->
      <script src="http://vast-engineering.github.io/jquery-popup-overlay/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:

- Viewport Image