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

Next example

^*Doesn't work on iOS (Issue 57).

Fade & Scale Arrest

escape:false prevents closing on Esc key.

blur:false prevents closing on click outside the popup.

$('#fadeandscale').popup({
  escape: false,
  blur: false,
  scrolllock: true,
  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({
  focusdelay: 400, // for smoother slide-in animations on Android
  outline: true,
  vertical: 'top'
});

#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 vertical will set the position.

keepfocus:false will prevent locking tabbing inside of popup, and leave a focus on the opening element.

autozindex will keep the popup on top of all other elements on the page.

$('#active_background_fixed').popup({
  background: false,
  horizontal: 'right',
  vertical: 'bottom',
  keepfocus: false,
  autozindex: true,
  blur: false
});

Active background absolute

absolute:true keeps the popup in place when scrolling.

focuselement:'closebutton' will focus the Close element even if keepfocus is false.

$('#active_background_absolute').popup({
  absolute: true,
  background: false,
  keepfocus: false,
  focuselement: 'closebutton'
});

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