In this tutorial, we are going to discuss about a jQuery plugin for responsive and accessible modal windows and tooltips, called jQuery Popup Overlay Plugin.
Contents
- jQuery Popup Overlay Features
- jQuery Popup Overlay Options
- jQuery Popup Overlay Methods
- jQuery Popup Overlay Events
- jQuery Popup Overlay Plugin in Action
jQuery Popup Overlay Features
- The main feature of this plugin is it can be positioned with CSS.
- Suitable for responsive web design. It will easily adapt to any screen size and orientation.
- Vertical scrolling will be automatically enabled which makes it visible always.
- Supports navigation using keyboard. You can use tab key to navigate.
- It is device independent and works well on desktops, mobiles, tablets etc.
- It is very flexible and customizable.
jQuery Popup Overlay Options
In this section, we will discuss about different options available to customize the jQuery Popup Overlay plugin. We have used many of these options in the jQuery Popup Overlay Plugin in Action section.
The above table briefly describes most of the options available in jQuery Popup Overlay Plugin. You can check out the official site for more options.
jQuery Popup Overlay Methods
In this section, we will look into the jQuery Popup Overlay Plugin methods and its syntax. These methods are very useful when you deal with the popup plugin.
jQuery Popup Overlay Events
In this section, we will discuss about different callback function executed when an event associated with jQuery Popup Overlay plugin is fired. We have used many of these events in the jQuery Popup Overlay Plugin in Action section.
jQuery Popup Overlay in Action
In this section, we will try different examples to explore the jQuery Popup Overlay plugin.
Basic Functionality
The following example demonstrates the basic functionality of jQueryUI Popup Overlay plugin.
basic.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Functionality</title>
<style>
.popUpDiv{
box-shadow: 0 0 10px rgb(0, 0, 0);
display:none;
margin:1em;
}
</style>
</head>
<body>
<!-- Add an optional button to open the popup -->
<button class="basicDemo_open">Open popup</button>
<!-- Add content to the popup -->
<div id="basicDemo" class="popUpDiv" style="max-width:30em;">
<h4>Journal Dev jQuery popUp Overlay Demo</h4>
<p>Demonstrates the basic functionality of jQuery PopUp Overlay.</p>
<!-- Add an optional button to close the popup -->
<button class="basicDemo_close">Close</button>
</div>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include jQuery Popup Overlay -->
<script src="https://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#basicDemo').popup();
});
</script>
</body>
</html>
You will see the following output in your browser.
ToolTip Example
The following example demonstrates the tooltip type option of the jQuery popup overlay plugin.
tooltip.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tooltip Example</title>
<style>
.popUpDiv{
box-shadow: 0 0 10px rgb(0, 0, 0);
display:none;
margin:1em;
}
</style>
</head>
<body>
<!-- Add an optional button to open the popup -->
<button class="tooltip_open">JournalDev ToolTip Example</button>
<!-- Add content to the popup -->
<div id="tooltip" class="popUpDiv" style="max-width:30em;">
<a href="#" class="tooltip_close" style="float:right;padding:0 0.4em;"></a>
<h4>ToolTip Example</h4>
<p>Demonstrates the tooltip animation of jQuery popup overlay plugin</p>
<!-- Add an optional button to close the popup -->
<button class="tooltip_close">Close</button>
</div>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include jQuery Popup Overlay -->
<script src="https://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#tooltip').popup({
type: 'tooltip',
vertical: 'top',
transition: '0.5s all 0.1s',
tooltipanchor: $('#tooltip_open')
});
});
</script>
</body>
</html>
You will see the following output in your browser.
Active BackGround Example
The following example demonstrates the popup with active background.
activebackground.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Active BackGround Example</title>
<style>
.popUpDiv{
box-shadow: 0 0 10px rgb(0, 0, 0);
display:none;
margin:1em;
}
</style>
</head>
<body>
<div>
<p>You can click on this text and won't close the popup.</p>
</div
<!-- Add an optional button to open the popup -->
<button class="activebg_open">Active background example</button>
<!-- Add content to the popup -->
<div id="activebg" class="popUpDiv" style="max-width:30em;">
<h4>Active backGround Example</h4>
<p>Demonstrates the pop up with active background</p>
<!-- Add an optional button to close the popup -->
<button class="activebg_close">Close</button>
</div>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include jQuery Popup Overlay -->
<script src="https://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#activebg').popup({
backgroundactive:true
});
});
</script>
</body>
</html>
You will see the following output in your browser.
Callback Events Example
The following example demonstrates the usage of callback functions like beforeopen, onopen, onclose, opentransitionend and closetransitionend
callback.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CallBack Events Example</title>
<style>
.popUpDiv{
box-shadow: 0 0 10px rgb(0, 0, 0);
display:none;
margin:1em;
}
</style>
</head>
<body>
<!-- Add an optional button to open the popup -->
<button class="callbackDemo_open">CallBack Example</button>
<!-- Add content to the popup -->
<div id="callbackDemo" class="popUpDiv" style="max-width:30em;">
<h4>Callback Events Example</h4>
<p>Demonstrates the Callback events</p>
<!-- Add an optional button to close the popup -->
<button class="callbackDemo_close">Close</button>
</div>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include jQuery Popup Overlay -->
<script src="https://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
<script>
$(document).ready(function() {
// Initialize the plugin
$('#callbackDemo').popup({
beforeopen: function () {
alert('beforeopen');
},
onopen: function () {
alert('onopen');
},
onclose: function () {
alert('onclose');
},
opentransitionend: function () {
alert('opentransitionend');
},
closetransitionend: function () {
alert('closetransitionend');
}
});
});
</script>
</body>
</html>
You will see the following output in your browser.
That’s all for now and you will see more in the coming posts.
Hi jobin,
How do I use multiple tooltips on the same page. I need to replace CLASS instead of ID. Can you help me with a working example please.
Thank you in advance