jquery+css3实现的经典弹出层效果示例

下面是jquery+css3实现的经典弹出层效果示例的完整攻略：

一、什么是弹出层

弹出层是一个浮动在当前页面上方的布局，用于展示额外的信息、表单以及对话框等，常用于用户登录、注册、购物车、提示弹窗等。通常开发者在前端页面中使用div容器实现弹出层的效果，可以通过CSS设置弹出框的大小、位置、背景等等，而jQuery则可以方便地对弹出框进行控制。

二、利用jQuery+CSS3实现弹出层效果

在实现弹出层效果时，可以通过jQuery的click()方法监听点击事件，当特定元素被点击时，通过动态创建div元素来实现弹出层的效果，同时利用CSS3来设置弹出层的风格和动画。下面以两个示例来详细讲解:

示例一：点击按钮弹出层

首先，需要HTML代码中添加一个按钮元素（如下）：

<button id="openModal">点击打开弹出层</button>

在JS代码中，利用jQuery的click()方法监听按钮元素的点击事件。当按钮被点击时，需要动态创建一个div元素（如下）：

$('#openModal').click(function () {
  // 手动创建弹出层容器元素
  var modal = $('<div class="modal"></div>');
  // 将新创建的元素添加到body元素中
  $('body').append(modal);
});

接着，需要在CSS文件中添加样式来对弹出层容器进行美化：

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

此时，弹出层容器元素已经创建好了，但是还需要添加关闭按钮和关闭事件。

在JS代码中，添加一个关闭按钮：

// 创建关闭按钮
var closeButton = $('<button></button>');
// 给关闭按钮添加文字和类名
closeButton.addClass('close').html('&times;');
// 将关闭按钮添加到弹出层容器中
modal.append(closeButton);

同时在CSS中添加关闭按钮的样式：

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}
.close:hover {
  opacity: 1;
}

最后，在JS代码中为关闭按钮添加点击事件，关闭弹出层容器：

// 设置关闭按钮点击事件
closeButton.click(function () {
  modal.remove();
});

这样，一个简单的点击按钮弹出层的效果就实现了。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>示例一：点击按钮弹出层</title>
    <style type="text/css">
      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .close {
        position: absolute;
        top: 10px;
        right: 10px;
        border: none;
        background: none;
        font-size: 20px;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.3s ease-in-out;
      }

      .close:hover {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <button id="openModal">点击打开弹出层</button>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('#openModal').click(function () {
          var modal = $('<div class="modal"></div>');
          $('body').append(modal);

          var closeButton = $('<button></button>');
          closeButton.addClass('close').html('&times;');
          modal.append(closeButton);

          closeButton.click(function () {
            modal.remove();
          });
        });
      });

      // 代码来自阮一峰的网络日志
      // https://www.ruanyifeng.com/blog/2021/01/css3-popup.html
    </script>
  </body>
</html>

示例二：点击图片弹出层

在本示例中，需要添加点击图片的事件监听器，关于图片，我们可以直接利用网络上的图片地址。在点击图片后，通过JavaScript创建弹出层容器，再在弹出层中添加图片元素并对其进行定位，最后通过CSS3实现弹出层的缩放动画效果。示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>示例二：点击图片弹出层</title>
    <style type="text/css">
      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }

      .modal.active {
        opacity: 1;
      }

      .modal img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90%;
        max-height: 90%;
        border-radius: 10px;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
      }

      .modal .close {
        position: absolute;
        top: 10px;
        right: 10px;
        border: none;
        background: none;
        font-size: 20px;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.3s ease-in-out;
      }

      .modal .close:hover {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593327_960_720.jpg" alt="示例图片" />
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.image img').click(function () {
          var modal = $('<div class="modal"></div>');
          var img = $(this).clone();
          modal.append(img);
          $('body').append(modal);

          var closeButton = $('<button></button>');
          closeButton.addClass('close').html('&times;');
          modal.append(closeButton);

          closeButton.click(function () {
            modal.removeClass('active');
            setTimeout(function () {
              modal.remove();
            }, 300);
          });

          setTimeout(function () {
            modal.addClass('active');
          }, 10);
        });
      });
    </script>
  </body>
</html>

三、总结

通过本篇攻略，我们了解了如何利用jQuery+CSS3实现弹出层效果，提供了点击按钮弹出层和点击图片弹出层两种示例。弹出层效果可以大大提高用户的交互体验，特别是当我们需要强制性地引导用户执行某些操作时，弹出层就可以在视觉上起到很好的引导作用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery+css3实现的经典弹出层效果示例 - Python技术站