jquery点击提交后出现转圈圈的弹窗

原创

mob649e815cb099 2023-08-01 07:30:13 ©著作权

文章标签 代码示例 jQuery html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815cb099的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery点击提交后出现转圈圈的弹窗

在现代Web开发中，用户体验是至关重要的。为了提高用户体验，我们经常会在网页中添加一些交互效果来提供反馈。其中之一就是在点击提交按钮后显示一个转圈圈的弹窗，以提示用户正在等待服务器响应。

本文将介绍如何使用jQuery实现这样的效果，并提供相应的代码示例。

弹窗组件

首先，我们需要一个弹窗组件来显示转圈圈的效果。这里我们使用[Bootstrap](

下面是一个简单的HTML代码示例，用于展示转圈圈的弹窗：

<div class="modal" id="loadingModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
  </div>
</div>

这个示例中，我们使用了Bootstrap的模态框组件，并在其中添加了一个用于显示转圈圈的spinner-border组件。

点击事件处理

接下来，我们需要在点击提交按钮后显示这个弹窗。我们可以使用jQuery来实现这个功能。下面是一个简单的代码示例：

<script src="
<script>
  $(document).ready(function() {
    $('form').submit(function() {
      $('#loadingModal').modal('show');
    });
  });
</script>

在这个示例中，我们使用了jQuery的submit方法来监听表单的提交事件。当用户点击提交按钮时，submit事件将被触发。在事件处理函数中，我们使用modal方法来显示弹窗。

完整示例

下面是一个完整的示例，包含了HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>Click to Show Loading Modal</title>
  <link rel="stylesheet" href="
</head>
<body>

  <form>
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

  <div class="modal" id="loadingModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body text-center">
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="
  <script src="
  <script>
    $(document).ready(function() {
      $('form').submit(function() {
        $('#loadingModal').modal('show');
      });
    });
  </script>

</body>
</html>

在这个示例中，我们使用了Bootstrap的样式，并将jQuery和Bootstrap的JavaScript文件引入到HTML中。当用户点击提交按钮时，弹窗将显示出来，同时转圈圈的动画也会开始播放。