jQuery Popup Overlay

Basic

$('#basic').popup();

Try to change the width and height of browser window, or to rotate your device.

Also try to navigate with the Tab key

The dialog can be closed by pressing the Esc key, or by clicking on the background
outside the content area, or by clicking on the Close button.

Generated close button

closebutton: true option will append markup for the close button (at top right).

$('#closebutton').popup({
  closebutton: true
});

Additionally, custom markup can be provided via closebuttonmarkup option.

Fade

CSS transitions can be set via options:

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

Or you can set transitions directly in CSS:

$('#fade').popup();

#fade,
#fade_wrapper,
#fade_background {
  transition: all 0.3s;
}

Scrolllock

Scrolling can be locked with scrollock option.

$('#scrolllock').popup({
  scrolllock: true
});

Fade & Scale

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

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

Slide-in

If you are using slide-in or any animation that is getting the popup out of the viewport, use focusdelay that is longer than transition-duration, it will make animations more smooth in Chrome on Android which tries to get the focused element to the viewport and conflicts the animation.

outline controls the outline visibility on the popup. It is optional and added just for demonstration.

$('#slide').popup({
  vertical: 'top',
  outline: true,
  focusdelay: 400 // for smoother slide-in animations on Android
});

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

Active background

background: false will enable interaction with background content (hover, click, etc.), while the popup is visible, as the background div will not be added to DOM.

horizontal and horizontal will set the position.

$('#fade').popup({
  background: false,
  horizontal: 'right',
  vertical: 'bottom'
});

Active background absolute

Use absolute: true if you want to have absolute (not fixed) position of the popup.

blur:false will keep the popup visible, even after clicking on background content.

$('#fade').popup({
  background: false,
  blur: false,
  absolute: true
});

Inactive background

color: 'transparent' will print a transparent background and prevent (initial) interaction with background content, so it will require 2 clicks to interact with background content, in case blur:false is not set.

$('#fade').popup({
  color: 'transparent'
});

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

See other examples on JSBin:

• Viewport Image