弹出框/提示框插件

最新推荐文章于 2025-07-30 09:27:14 发布

原创最新推荐文章于 2025-07-30 09:27:14 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了JavaScript的弹出框/提示框插件。其中，sweetalert是bootstrap的插件，比alert更美观、功能强大，有基本信息弹窗等多种功能；toastr具有异步、无阻塞的优点，可显示在不同位置。

弹出框/提示框插件

一、sweetalert

bootstrap的弹出框/提示框插件，比alert更美观、功能更强大
功能：基本信息弹窗、带确认信息的弹窗、带输入信息的弹窗、支持ajax请求、成功失败等提示弹窗
官网地址(中文):http://mishengqiang.com/sweetalert/
git地址：https://github.com/t4t5/sweetalert

cdn

<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>

代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.min.css">
    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
    <button id="submit">click</button>
<!--     sweetalert：bootstrap的弹出框/提示框插件，比alert更美观、功能更强大
    功能：基本信息弹窗、带确认信息的弹窗、带输入信息的弹窗、支持ajax请求、成功失败等提示弹窗
    官网地址(中文):http://mishengqiang.com/sweetalert/
    git地址：https://github.com/t4t5/sweetalert
    cdn:
    https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css
    https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js
 -->
    <script type="text/javascript">
        $(function() {
            $("#submit").click(function(event) {
                /* Act on the event */
                // sweetAlert("哎呦……", "出错了！","error");
                // swal("这是一条信息！")
                // swal("这是一条信息！", "很漂亮，不是吗？")
                swal("干得漂亮！", "你点击了按钮！","success")
                // swal({
                //   title: "确定删除吗？",
                //   text: "你将无法恢复该虚拟文件！",
                //   type: "warning",
                //   showCancelButton: true,
                //   confirmButtonColor: "#DD6B55",
                //   confirmButtonText: "确定删除！",
                //   closeOnConfirm: false
                // },
                // function(){
                //   swal("删除！", "你的虚拟文件已经被删除。", "success");
                // });
            });
        })
    </script>
</body>
</html>

二、toastr

优点：异步、无阻塞，可以显示在不同的位置

代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
    <!-- jquery 要在toastr之前引用 -->
    <script type="text/javascript" src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
    <script type="text/javascript">
        // 设置居中
        toastr.options.positionClass = "toast-top-center";
    </script>
</head>
<body>

    <!-- 优点：异步、无阻塞，可以显示在不同的位置 -->
    <button id="button1">异常</button>

    <script type="text/javascript">
        $(function() {
            $('#button1').click(function () {
                toastr.info("121.");
                toastr.success("hello world.");
                toastr.warning("hello world.");
                toastr.error("hello world.");
            });
        })
    </script>
</body>
</html>