博客

如何使用jQuery创建自动弹出窗口

  • Post category:jquery

下面是关于使用jQuery创建自动弹出窗口的完整攻略。

1. 准备工作

首先，你需要在你的网站页面中引入jQuery库，代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 创建弹出窗口的HTML结构

在网站页面中添加一个隐藏的弹出窗口，如下所示：

<div id="modal" style="display:none">
  <h2>这是弹出窗口的标题</h2>
  <p>这是弹出窗口的内容</p>
</div>

3. 创建触发弹出窗口的按钮

在网站页面中添加一个按钮，当用户点击该按钮时触发弹出窗口的显示，如下所示：

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

4. 编写jQuery代码

在网站页面中添加以下jQuery代码：

$(function() {
  // 点击打开弹出窗口按钮时，显示弹出窗口，并遮盖背景
  $('#openModal').click(function() {
    $('#modal').fadeIn();
    $('<div id="modalOverlay"></div>').appendTo('body').fadeIn();
  });

  // 点击关闭弹出窗口按钮时，隐藏弹出窗口和遮盖背景
  $('#closeModal').click(function() {
    $('#modal,#modalOverlay').fadeOut(function() {
      $('#modalOverlay').remove();
    });
  });
});

以上代码的作用是，当用户点击打开弹出窗口按钮时，显示弹出窗口，并且添加一个遮盖层遮盖页面的背景；当用户点击关闭弹出窗口按钮时，隐藏弹出窗口和遮盖背景。

示例说明1

下面是一个完整的示例说明，展示了如何在网站页面中使用jQuery创建自动弹出窗口。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自动弹出窗口示例</title>
  <style>
    /* 遮盖层样式 */
    #modalOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 9998;
      background-color: rgba(0, 0, 0, 0.5);
    }

    /* 弹出窗口样式 */
    #modal {
      display: none;
      position: fixed;
      top: 25%;
      left: 25%;
      height: 50%;
      width: 50%;
      z-index: 9999;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <!-- 弹出窗口 -->
  <div id="modal">
    <h2>这是弹出窗口的标题</h2>
    <p>这是弹出窗口的内容</p>
    <button id="closeModal">关闭</button>
  </div>

  <!-- 触发弹出窗口的按钮 -->
  <button id="openModal">点击打开弹出窗口</button>

  <!-- 引入jQuery库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- jQuery代码 -->
  <script>
    $(function() {
      // 点击打开弹出窗口按钮时，显示弹出窗口，并遮盖背景
      $('#openModal').click(function() {
        $('#modal').fadeIn();
        $('<div id="modalOverlay"></div>').appendTo('body').fadeIn();
      });

      // 点击关闭弹出窗口按钮时，隐藏弹出窗口和遮盖背景
      $('#closeModal').click(function() {
        $('#modal,#modalOverlay').fadeOut(function() {
          $('#modalOverlay').remove();
        });
      });
    });
  </script>
</body>
</html>

示例说明2

下面是另外一个完整的示例说明，展示了如何在网站页面中使用jQuery创建自动弹出窗口，并且显示的内容是动态生成的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自动弹出窗口示例</title>
  <style>
    /* 遮盖层样式 */
    #modalOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 9998;
      background-color: rgba(0, 0, 0, 0.5);
    }

    /* 弹出窗口样式 */
    #modal {
      display: none;
      position: fixed;
      top: 25%;
      left: 25%;
      height: 50%;
      width: 50%;
      z-index: 9999;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <!-- 触发弹出窗口的按钮 -->
  <button id="openModal">点击打开弹出窗口</button>

  <!-- 引入jQuery库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- jQuery代码 -->
  <script>
    $(function() {
      // 点击打开弹出窗口按钮时，显示弹出窗口，并遮盖背景
      $('#openModal').click(function() {
        var html = '';
        // 动态生成弹出窗口的内容
        for(var i=0; i<10; i++) {
          html += '<p>这是第' + (i+1) + '行</p>';
        }
        $('#modal').html(html).fadeIn();
        $('<div id="modalOverlay"></div>').appendTo('body').fadeIn();
      });

      // 点击关闭弹出窗口按钮时，隐藏弹出窗口和遮盖背景
      $(document).on('click', '#closeModal', function() {
        $('#modal,#modalOverlay').fadeOut(function() {
          $('#modalOverlay').remove();
        });
      });
    });
  </script>

  <!-- 弹出窗口 -->
  <div id="modal"></div>
</body>
</html>

以上就是关于如何使用jQuery创建自动弹出窗口的完整攻略，如果有任何疑问，请随时向我提出。

Tags: