使用 jQuery 创建警报

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

使用 jQuery 创建警报

作者：迹忆客最近更新：2023/03/13 浏览次数：

本篇文章将重点介绍创建或添加 jQuery 警报。快速的答案是使用 jQuery alert() 并提供要在监视中显示的内容作为参数。

使用 jQuery 创建警报

jQuery 提供了几种方便的方法，可用于在应用程序中执行各种任务。向消费者显示通知的最出色方法之一是通过 jQuery 警报消息。

在开发任何代码时，你必须在按下按钮或发生事件时使用警报消息。

语法：

Alert(Specify Content)

用户必须在 content 参数中指定他们希望在警报消息框中显示的任何文本内容。

例子：

<script>
    $(document).ready(function () {
        $("#alert-id").click(function () {
            alert("Hello World! Welcome to upwork.");
        });
    });
</script>

输出：

jQuery 警报消息

当你单击按钮时，它会触发 click() 函数并提供显示一些消息的弹出窗口。

jQuery 警报弹出窗口

尽管 jQuery 不包含用于创建模态警报的内置 alert 组件，但你可以使用插件在你的网页中构建一个令人惊叹的 jQuery 警报框。

我们将演示如何使用插件来创建各种警报，例如带有简单消息的主警报、确定按钮以及提示和确认警报。继续阅读以查看包含 HTML 组件（如链接）的信号示例。

使用 jAlert 插件创建警报

你可以使用 jAlert 插件为各种警报类型创建具有各种参数的警报，例如，带有关闭警告和使用多个彩色按钮的动画的主要或确认警报。

该插件还与最新的 jQuery 版本兼容。

在这个示例中创建了一个基本的 jQuery 警报，包括一个用于关闭警报窗口的 Good 按钮。

使用 jAlert 插件的 jQuery 警报

这是示例代码。你可以保存文件并在浏览器中运行它。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="jAlert.js"></script>
    <link rel="stylesheet" href="jAlert.css" />
  </head>

  <body>
    <h1>jQuery Alert</h1>

    <div>
      <button class="alertid">Simple jAlert</button>
    </div>
    <script>
      $(".alertid").on("click", function (e) {
        e.preventDefault();
        var btn = $(this),
          theme = "green";

        $.jAlert({
          title: "jAlert simple sample",
          content: "Simple jAlert based on jQuery!",
          theme: theme,
          closeOnClick: true,
          backgroundColor: "white",
          btns: [{ text: "Good", theme: theme }],
        });
      });
    </script>
  </body>
</html>