jQuery弹出窗口简单实现代码

下面是详细的攻略。

1. 引入jQuery和Bootstrap

在开始之前，首先需要保证已经引入了jQuery和Bootstrap。因为本文实现弹出窗口的代码是基于这两个库的。

可以在HTML文档的头部加入以下代码，引入jQuery和Bootstrap：

<head>
  <!-- 引入jQuery库 -->
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!-- 引入Bootstrap JS -->
  <script src="https://cdn.bootcss.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

2. 实现弹出窗口的代码

2.1 常规弹出窗口

常规弹出窗口一般有三个要素：触发器、模态框和触发模态框出现的代码。

触发器：一般是一个按钮，点击按钮就可以触发弹出模态框。

模态框：用来显示弹出窗口的内容，可以自定义内容及样式。

触发模态框出现的代码：在点击触发器后，要执行这段代码，才能使模态框出现。

下面是一个简单的实现代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>弹出窗口示例</title>
  <!-- 引入jQuery和Bootstrap -->
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 触发器 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">弹出模态框</button>

  <!-- 模态框 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          模态框内容
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 触发模态框出现的代码 -->
  <script>
    $(function(){
      $('#exampleModal').modal({
        backdrop: 'static',  // 静态背景，不允许点击空白处关闭模态框
        keyboard: false  // 关闭键盘ESC键的关闭模态框功能
      });
    });
  </script>

</body>
</html>

运行以上代码，就可以看到一个简单的弹出窗口示例了。

2.2 自定义弹出窗口

上面的示例是一个简单的弹出窗口，如果需要自定义弹出窗口的样式及内部内容，就需要对模态框进行一些自定义的操作。

下面是一个自定义弹出窗口的示例，其中模态框内容使用了Bootstrap的表单组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义弹出窗口示例</title>
  <!-- 引入jQuery和Bootstrap -->
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 触发器 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">弹出模态框</button>

  <!-- 模态框 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">自定义模态框</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="inputName">姓名</label>
              <input type="text" class="form-control" id="inputName" placeholder="请输入姓名">
            </div>
            <div class="form-group">
              <label for="inputAge">年龄</label>
              <input type="number" class="form-control" id="inputAge" placeholder="请输入年龄">
            </div>
            <div class="form-group">
              <label for="inputGender">性别</label>
              <select class="form-control" id="inputGender">
                <option>男</option>
                <option>女</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 触发模态框出现的代码 -->
  <script>
    $(function(){
      $('#exampleModal').modal({
        backdrop: 'static',  // 静态背景，不允许点击空白处关闭模态框
        keyboard: false  // 关闭键盘ESC键的关闭模态框功能
      });
    });
  </script>

</body>
</html>

运行以上代码，就可以看到一个自定义样式和内容的弹出窗口示例。

以上就是实现jQuery弹出窗口的简单攻略及两个示例。希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery弹出窗口简单实现代码 - Python技术站

jQuery弹出窗口简单实现代码

1. 引入jQuery和Bootstrap

2. 实现弹出窗口的代码

2.1 常规弹出窗口

2.2 自定义弹出窗口

相关文章