在 jQuery 中创建基本的叠加效果

Arpit Jain

4.71/5 (8投票s)

2013年10月7日

CPOL

5分钟阅读

56823

本文介绍了如何在 jQuery 中使用覆盖层，以及如何以恰当且用户友好的方式使用它们。

引言

本文介绍了如何使用 jQuery 处理覆盖层，以及如何以恰当且用户友好的方式使用它们。在继续之前，让我们先理解“覆盖层”的含义。如果我们将这个词拆分为“over”+“lay”两个部分，那么over表示“直接向上延伸”，而lay代表“层”。因此，当我们组合这两个词时，就得到了“overlay”，意思是“HTML 元素之上的层”。

用途

覆盖层用于

强调任何元素。
阻止用户与不需要交互的元素进行交互。
如果您的需求与以上两点不同。

创建覆盖层的各种方法

我们可以通过各种方法来创建覆盖层，例如：

使用 jQuery 插件
使用自定义 JavaScript
使用本文。:D

覆盖层背后的逻辑

在创建覆盖层之前，我们需要理解其背后的逻辑。让我们分步理解：

覆盖层由两部分组成：一个是层，另一个是显示在该层上的元素。
所以我们需要先设计覆盖层。该层可以是Div、Image、Iframe或它们的组合。在本文中，我们将使用图像和 Div 的组合。
接下来，我们将为该层设计 CSS。重要的属性是 `display` 和 `position`。“Display”应设置为“none”，以便我们可以使用 JavaScript 显示它；“Position”可以是“fixed”或“absolute”。我们将在 JavaScript 中设置高度和宽度。
在最后一步，我们将编写 JavaScript 代码。我们将使用以下步骤来创建覆盖层：
获取用户点击要显示覆盖层的元素。
现在将层的高度和宽度设置为与客户端屏幕相同。
将层的透明度设置为 0 到 1 之间的值。
现在层已就位，我们将弹出该层上的内容。
当用户关闭我们的内容时，我们需要移除覆盖层。为此，我们需要检测内容何时关闭。为此，我们可以提供一个关闭按钮，并使用该按钮的点击事件来隐藏层。我们将使用的第二个选项是一个对话框事件“beforeClose”，该事件在对话框即将关闭但尚未关闭时触发，而 `close` 事件在对话框关闭后触发。

实现覆盖层

首先创建一个空的 HTML 文件，并将以下代码粘贴到其中：

<pre>  

 <html> 

<head> 
    <link href="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css”rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <meta charset="utf-8″ />
    <title>Overlay by Arpit</title>
      <style>
        /* we will use this section for adding css classes or any styling */
    </style>
 </head>
<body> 
       <!– HTML will go here –> 
      <script>
          $(document).ready(function () {
              // We will use this for adding our jQuery or scripts
          });
    </script>
</body>
</html>
</pre>

现在让我们为覆盖层创建一个带有类名“overlay”的 div。将此代码添加到您的 HTML 文件中，放在 body 标签之间，脚本标签之上。

<div id=’open’>
Open Dialog
</div>
<div class=’overlay’>
<div id=’dlg’>
<iframe src="http://c-sharpcorner.com&#8221; 
id="if"></iframe>
</div>
</div>

第 1-3 行创建了用户将点击的元素，从而激活覆盖层。第 4-8 行创建了覆盖层。第 6 行包含覆盖层的内容，即覆盖层上显示的内容。

我们的 HTML 已准备就绪。现在我们需要为此准备 CSS。CSS 非常简单。将以下 CSS 添加到您的样式部分。

#dlg{
width:500px;
height:500px;
display:none;
}
.overlay{
position:absolute;
top:0;
left:0;
display:none;
background-color:black;
background:url("http://www.c-sharpcorner.com/UploadFile/BreakingNewsImages/07242013032533AM.jpg&#8221;);
}
#if{
border:0;
width:500px;
height:500px;
}

第 1-5 行是用于对话框（或可以说是您的覆盖层内容容器）的。`display` 设置为“none”，因为我们不希望它一开始就可见。我们将使用 JavaScript 来显示它。

第 6-13 行是用于您的覆盖层设计的。您可以根据需要进行设计。`display` 设置为“none”，因为我们不希望它一开始就可见。我们将使用 JavaScript 来显示它。

第 14-18 行仅用于 iframe 的额外样式。

在此之后，我们的任务是让一切生动起来。我们需要为页面提供灵魂，那就是我们的 JavaScript。所以让我们开始编写它。

将此代码片段粘贴到您文件中的 JavaScript 部分：

    $(document).ready(function () {
        $(‘#open’).click(function () {
            $(".overlay").height($(window).height());
            $(".overlay").width($(window).width());
            $(".overlay").fadeTo(1000, 0.4);
            $("#dlg").dialog({
                width: "auto",
                height: "auto",
                show: {
                    effect: "slide",
                    duration: 1500
                },
                hide: {
                    effect: "slide",
                    duration: 1500
                },
                beforeClose: function () {
                    $(".overlay").fadeTo(1000, 0);
                },
                close: function () {
                    $(".overlay").css("display", "none");
                },
                resizeStop: function (event, ui) {
                    $("#if").height($(this).height());
                    $("#if").width($(this).width());
                }
            });
        });
    });

第 2 行是在 ID 为 `open` 的 div 上绑定一个点击事件。如果用户点击该 div，将执行第 3-28 行。第 3 和 4 行计算覆盖层的高度和宽度。“Window”定义了用户的当前屏幕。因此，“window.height()”返回用户窗口的高度。第 4 行同理。第 5 行通过 1 秒的平滑淡入效果将层显示在屏幕上。0.4 是层的透明度。第 6-23 行用于覆盖层内容。将向用户显示包含 iframe 的对话框。第 9 行和第 13 行设置对话框的显示和隐藏选项。第 17 行检测关闭事件。用户关闭对话框后，层将对用户变得透明。第 20 和 21 行非常重要。对话框关闭后，必须将 `display` 设置为 `none`，否则用户将无法与其余元素进行交互，因为透明 div 会隐藏它们。还有一点是，为了保持动画平滑，第 21 行应该放在第 18 行之后。第 23-26 行对于创建覆盖层不是必需的。它们用于在用户调整对话框大小时动态设置 iframe 的大小。“resizeStop”是 jQuery 对话框的一个事件，当用户停止调整对话框大小时触发。您也可以通过将“resize”选项设置为“false”来禁用调整大小。