SweetAlert用法详细说明

最新推荐文章于 2024-08-17 21:48:20 发布

新老农

最新推荐文章于 2024-08-17 21:48:20 发布

阅读量3.2k

点赞数 1

分类专栏： PHP Storm PHP HTML 文章标签： SweetAlert

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/113336199

版权

PHP 同时被 3 个专栏收录

106 篇文章 1 订阅

订阅专栏

PHP Storm

60 篇文章 0 订阅

订阅专栏

HTML

54 篇文章 1 订阅

订阅专栏

在这里插入图片描述

sweetAlert('面料编号不能为空');

在这里插入图片描述

Swal.fire("面料编号不能为空", "", "error");

在这里插入图片描述

  swal({
                title:"恭喜",
                text:"添加成功",
                type:"success"

        });

1. 带有确定和取消的弹框

Swal.fire({
    type: 'warning', // 弹框类型
    title: '注销帐号', //标题
    text: "注销后将无法恢复，请谨慎操作！", //显示内容            
 
    confirmButtonColor: '#3085d6',// 确定按钮的 颜色
    confirmButtonText: '确定',// 确定按钮的 文字
    showCancelButton: true, // 是否显示取消按钮
    cancelButtonColor: '#d33', // 取消按钮的 颜色
    cancelButtonText: "取消", // 取消按钮的 文字
 
    focusCancel: true, // 是否聚焦 取消按钮
    reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
}).then((isConfirm) => {
    try {
        //判断 是否 点击的 确定按钮
        if (isConfirm.value) {
            Swal.fire("成功", "点击了确定", "success");
        }
        else {
            Swal.fire("取消", "点击了取消", "error");
        }
    } catch (e) {
        alert(e);
    }
});

2.带有展示标签内容的弹框
在这里插入图片描述

var content = "无记录";
var msg=""; //msg 是从外面传入的数据
 
if (msg) {
 
    content = "<p style='color: red'>最近一次操作后的5小时内有效</p> "
        + "<p>可以使用 Ctrl +F 查找关键字</p>"
        + "<table class='table_list'>"
        + "<tr>"
        + "     <th class='js_tr_data'> 时间</th> <th>名称</th> <th>密码</th>"
        + "</tr>"
        + msg
        + "</table>"
}
 
Swal.fire({
    title: '<strong>记录</strong>',
    type: 'info',
    html: content, // HTML
    focusConfirm: true, //聚焦到确定按钮
    showCloseButton: true,//右上角关闭
})

在这里插入图片描述

 function deleteArticle(id){
        var serverAddress=serverAddressPath+'/api/arc/delete.shtml';
        swal({
        	  title:"",
        	  text:"确定删除吗？",
        	  type:"warning",
        	  showCancelButton:"true",
        	  showConfirmButton:"true",
        	  confirmButtonText:"确定",
        	  cancelButtonText:"取消",
        	  animation:"slide-from-top"
        	}, function() {
                var ids=new Array();
        	ids.push(id+"");
        	$.ajax({
        		type:"post",
        		url:serverAddress,
        		traditional: true,
        		dataType:"json",
        		data:{"id":ids}
        	}).done(function(data) {
                   swal("操作成功!", "已成功删除数据！", "success");
                   getMyArtic();
                }).error(function(data) {
                   swal("OMG", "删除操作失败了!", "error");
                });
          });
       }

3.带有定位和消失时间的弹框

Swal.fire({
  position: 'top-end', //定位 左上角
  type: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})

4. 自定义第三方 css 的弹框 (推荐使用 Animate.css )
在这里插入图片描述

Swal.fire({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    type: 'success',
    title: 'Signed in successfully'
})

6. 如何做一个自己的通用模版

//定义模版 (可多次使用)
var MyBox = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
});
 
//调用
MyBox.fire({
    type: 'success',
    title: 'successfully'
});