sweetalert : 一个比较好看的弹出框

最新推荐文章于 2025-06-08 15:41:49 发布

weixin_30357231

最新推荐文章于 2025-06-08 15:41:49 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/donghb/p/7543345.html

本文介绍了如何使用 SweetAlert2 插件创建不同类型的弹窗，包括基本的信息提示框、成功提示框、错误提示框及带有确认与取消按钮的警告框。通过示例展示了如何实现这些功能。

1.引入

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script>

2.三个常用的提示框

$(".demo_1").click(function() { 
    swal("这是一个信息提示框!"); 
}); 
$(".demo_2").click(function() { 
    swal("Good!", "弹出了一个操作成功的提示框", "success"); 
}); 
$(".demo_3").click(function() { 
    swal("OMG!", "弹出了一个错误提示框", "error"); 
});

3.警告框提示

swal({ 
    title: "您确定要删除吗？", 
    text: "您确定要删除这条数据？", 
    type: "warning", 
    showCancelButton: true, 
    closeOnConfirm: false, 
    confirmButtonText: "是的，我要删除", 
    confirmButtonColor: "#ec6c62" 
}, function() { 
    $.post(getUrl("Cart/del"), {id: id}, function(data) { 
        location.reload(); 
    }) 
});

转载于:https://www.cnblogs.com/donghb/p/7543345.html