jQuery plugin for responsive and accessible modal windows and tooltips.
Basic Fade Fade & scale Tooltip
<!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-eng.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#my_popup').popup();
});
</script>
</body>
</html>
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. |
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 | boolean | '#{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. When the popup is visible, |
|
outline | boolean | false | Shows a default browser outline on popup element when focused. Setting to |
detach | boolean | false | Removes popup element from the DOM after closing transition. If you are not using transitions but want to remove popup from DOM after closing, as a temporary solution you can use `notransitiondetach` instead of `detach`. |
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 different transition for background, and if you don't need to transition only selected properties. Otherwise set transitions in CSS. Simple fade effect Setting fade effect for all popups on the site: |
|
Example:
|
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:
|
Default values for options and events can be modified:
$.fn.popup.defaults.transition = 'all 0.3s';
$.fn.popup.defaults.pagecontainer = '.container';
Name | Description |
---|---|
.popup(options) | Activates your content as a popup. Accepts an optional options
|
.popup('show') | Manually opens a popup.
|
.popup('hide') | Manually hides a popup.
|
.popup('toggle') | Manually toggles a popup.
|
Download View project on GitHub
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').popup({
transition: 'all 0.3s'
});
Or you can set transitions directly in CSS:
$('#fade').popup();
#fade,
#fade_wrapper,
#fade_background {
-webkit-tranzition: all 0.3s;
-moz-tranzition: all 0.3s;
transition: all 0.3s;
}
$('#fade').popup({
transition: 'all 0.3s'
});
#fadeandscale {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.popup_visible #fadeandscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
$('#slidein').popup({
outline: true, // optional
focusdelay: 300, // optional
});
#slidein_background {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#slidein,
#slidein_wrapper {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#slidein {
-webkit-transform: translateX(0) translateY(-40%);
-moz-transform: translateX(0) translateY(-40%);
-ms-transform: translateX(0) translateY(-40%);
transform: translateX(0) translateY(-40%);
}
.popup_visible #slidein {
-webkit-transform: translateX(0) translateY(0);
-moz-transform: translateX(0) translateY(0);
-ms-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
$('#standalone').popup({
color: 'white',
opacity: 1,
transition: '0.3s',
scrolllock: true
});
#standalone {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.popup_visible #standalone {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
$('#fall').popup({
beforeopen: function () {
alert('beforeopen');
},
onopen: function () {
alert('onopen');
},
onclose: function () {
alert('onclose');
},
opentransitionend: function () {
alert('opentransitionend');
},
closetransitionend: function () {
alert('closetransitionend');
}
});