jquery 弹出窗口_jQuery弹出窗口和工具提示窗口动画效果

徐俊人

2023-12-01

jquery 弹出窗口

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.

在本教程中，我们将讨论用于响应式和可访问模式窗口和工具提示的jQuery插件，称为jQuery Popup Overlay插件。

内容 (Contents)

jQuery弹出式叠加功能 (jQuery Popup Overlay Features)

The main feature of this plugin is it can be positioned with CSS.
该插件的主要功能是可以与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.
支持使用键盘导航。 您可以使用Tab键导航。
It is device independent and works well on desktops, mobiles, tablets etc.
它与设备无关，可以在台式机，手机，平板电脑等上正常运行。
It is very flexible and customizable.
这是非常灵活和可定制的。

jQuery Popup叠加选项 (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.

在本节中，我们将讨论可用于自定义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.

选件	默认	描述
类型	'覆盖'	这用于将弹出类型设置为叠加或工具提示。
自动开启	假	初始化时显示弹出窗口。
背景	真正	启用背景封面，但禁用了工具提示。
颜色	'＃000'	用于设置背景颜色的字符串值。
不透明	0.5	用于设置背景不透明度。
水平的	'中央'	值'center'，'left'，'right'，'leftedge'，'rightedge'用于设置水平位置。值'leftedge'，'rightedge'仅适用于工具提示。
垂直	'中央'	值中心'，'顶部'，'底部'，'边缘'，'底部'用于设置垂直位置。值'topedge'，'bottomedge'仅适用于工具提示。
模糊	真正	设置为true会在外部单击时关闭弹出窗口。
过渡		在显示和隐藏弹出窗口时设置CSS过渡
工具提示		将元素设置为工具提示位置的锚点。

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插件中可用的大多数选项。您可以在官方网站上查看更多选项。

jQuery Popup覆盖方法 (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插件方法及其语法。当您处理弹出插件时，这些方法非常有用。

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’);

方法	用法	描述
弹出窗口（选项）	$（'＃popup'）。popup（{ 背景：false}）；	此方法将您的内容激活为弹出窗口。它还接受一个可选的options对象。
弹出（'显示'）	$（'＃popup'）。popup（'show'）;	用于打开弹出窗口。
弹出（'隐藏'）	$（'＃popup'）。popup（'hide'）;	用于隐藏弹出窗口。
popup（'toggle'）	$（'＃'popup'）。popup（'toggle'）;

jQuery弹出式叠加事件 (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插件相关的事件时执行的不同回调函数。我们在“ jQuery弹出式叠加插件在操作”部分中使用了许多此类事件。

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

回调功能	描述
开场前	该功能在打开弹出窗口之前执行
开	当弹出窗口开始打开时执行。
关闭	在关闭弹出窗口时执行。
opentransitionend	在打开CSS过渡结束后执行
closetransitionend	关闭CSS过渡结束后执行

jQuery Popup Overlay在行动 (jQuery Popup Overlay in Action)

In this section, we will try different examples to explore the jQuery Popup Overlay plugin.

在本节中，我们将尝试不同的示例来探索jQuery Popup Overlay插件。

基本功能 (Basic Functionality)

The following example demonstrates the basic functionality of jQueryUI Popup Overlay plugin.

以下示例演示了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>

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.

以下示例演示了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">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

下面的例子说明的回调函数的用法等beforeopen ， onopen ， onclose ， opentransitionend和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.

到此为止，您将在接下来的帖子中看到更多信息。

翻译自: https://www.journaldev.com/6998/jquery-popup-and-tooltip-window-animation-effects

jquery 弹出窗口

jquery 弹出窗口_jQuery弹出窗口和工具提示窗口动画效果

内容 (Contents)

jQuery弹出式叠加功能 (jQuery Popup Overlay Features)

jQuery Popup叠加选项 (jQuery Popup Overlay Options)

jQuery Popup覆盖方法 (jQuery Popup Overlay Methods)

jQuery弹出式叠加事件 (jQuery Popup Overlay Events)

jQuery Popup Overlay在行动 (jQuery Popup Overlay in Action)

基本功能 (Basic Functionality)

工具提示示例 (ToolTip Example)

活动背景示例 (Active BackGround Example)

回调事件示例 (Callback Events Example)

相关阅读

相关文章

相关问答

相关文档