jQuery弹出窗口和工具提示窗口动画效果
时间：2020-02-23 14:46:12 来源:igfitidea点击:
在本教程中，我们将讨论用于响应式和可访问模式窗口和工具提示的jQuery插件，称为jQuery Popup Overlay插件。
jQuery Popup叠加功能
此插件的主要功能是可以使用CSS定位。
适用于响应式网页设计。
它可以轻松适应任何屏幕尺寸和方向。垂直滚动将自动启用，使其始终可见。
支持使用键盘导航。
您可以使用Tab键进行导航。它与设备无关，可以在台式机，手机，平板电脑等上正常运行。
这是非常灵活和可定制的。
jQuery Popup覆盖选项
在本节中，我们将讨论可用于自定义jQuery Popup Overlay插件的不同选项。
我们在" jQuery弹出式叠加插件在操作"部分中使用了许多这些选项。
| Options | Default | Description |
|---|---|---|
| type | 'overlay' | This is used to set the pop up type to overlay or tooltip. |
| autoopen | false | displays the popup when it is initialized. |
| background | True | Enables background cover but it is disabled for tooltips. |
| color | '#000' | String value used to set the background color. |
| opacity | 0.5 | Used to set the background opacity. |
| horizontal | 'center' | The values 'center','left','right','leftedge','rightedge' are used to set the horizontal position.The values 'leftedge','rightedge' are available only for tooltips. |
| vertical | 'center' | The values center','top','bottom','topedge','bottomedge' are used to,set the vertical position.The values 'topedge','bottomedge',are,available only for tooltips. |
| blur | true | Setting to true closes the popup when clicked outside. |
| transition | Sets CSS transition when showing and hiding a popup | |
| tooltipanchor | Sets an element to be an anchor for tooltip position. |
上表简要描述了jQuery Popup Overlay插件中可用的大多数选项。
jQuery Popup覆盖方法
在本节中，我们将研究jQuery Popup Overlay Plugin方法及其语法。
当您处理弹出插件时，这些方法非常有用。
| Methods | Usage | Description |
|---|---|---|
| popup(options) | $('#popup').popup({background: false}); | This method activates your content as a popup. It also accepts an optional options object. |
| popup('show') | $('#popup').popup('show'); | Used to open a popup. |
| popup('hide') | $('#popup').popup('hide'); | Used to hide a popup. |
| popup('toggle') | $('#'popup').popup('toggle'); |
jQuery弹出式叠加事件
在本节中，我们将讨论触发与jQuery Popup Overlay插件关联的事件时执行的不同回调函数。
我们在" jQuery Popup叠加插件在操作"部分中使用了许多此类事件。
| Callback Function | Description |
|---|---|
| beforeopen | This function is executed before pop up is opened |
| onopen | Executes when the pop up starts to open. |
| onclose | Executes on closing the pop up. |
| opentransitionend | Execute after the opening CSS transition is over |
| closetransitionend | Execute after the closing CSS transition is over |
jQuery Popup Overlay在行动
在本节中，我们将尝试不同的示例来探索jQuery Popup Overlay插件。
基本功能
以下示例演示了jQueryUI Popup Overlay插件的基本功能。
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>
您将在浏览器中看到以下输出。
工具提示示例
以下示例演示了jQuery弹出式覆盖插件的工具提示类型选项。
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">theitroad 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>
您将在浏览器中看到以下输出。
活动背景示例
以下示例演示了具有活动背景的弹出窗口。
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>
您将在浏览器中看到以下输出。
回调事件示例
以下示例演示了回调函数的用法，例如beforeopen，onopen，onclose，opentransitionend和closecloseitionend
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>
