Javascript提示框插件SweetAlert详细讲解

SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等,而且兼容电脑、手机和平板,是替代传统的Javascript Alert的最佳效果。

一、使用方法

将 SweetAlert 下载到本地,然后在html引入SweetAlert相关组件。

首先在HTML中放置几个不同的提示按钮

<div class="demo_1"> 
    基本示例:<button>点击这里</button>  
</div> 
<div class="demo_2"> 
    提示成功:<button>点击这里</button>  
</div> 
<div class="demo_3"> 
    提示失败:<button>点击这里</button>  
</div> 
<div class="demo_4"> 
    多参数:<button>点击这里</button>  
</div>


引入sweetalert

<script src="sweetalert.min.js"></script>  
<link rel="stylesheet" href="sweetalert.css">


给按钮添加点击事件

$(".demo_1 button").click(function() { 
    swal("这是一个信息提示框!"); 
});

$(".demo_2 button").click(function() { 
    swal("Good!", "弹出了一个操作成功的提示框", "success"); 
});

$(".demo_3 button").click(function() { 
    swal("OMG!", "弹出了一个错误提示框", "error"); 
});

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

提示:本地sweetalert可能不支持IE8,但放在服务器就OK了,保证网页html能支持w3c标准即可。


二、SweetAlert参数

参数默认值描述
titlenull(必填)提示框标题
textnull提示内容
type
null提示类型,有:success(成功),error(错误),warning(警告),input(输入)
allowEscapeKeytrue如果设置为true,用户可以通过按退出键退出模态
customClassnull自定义Css
allowOutsideClickfalse如果设置为“true”,用户可以通过点击警告框以外的区域关闭警告框。
showCancelButtonfalse如果设置为“true”,“cancel”按钮将显示,点击可以关闭警告框
showConfirmButtontrue如果设置为false,“确定/确认”按钮将被隐藏
confirmButtonText“OK”该参数用来改变确认按钮上的文字。如果设置为"true",那么确认按钮将自动将"Confirm"替换为"OK"
confirmButtonColor“#AEDEF4”该参数用来改变确认按钮的背景颜色(必须是一个HEX值)
cancelButtonText“Cancel”该参数用来改变取消按钮的文字
closeOnConfirmtrue如果希望以后点击了确认按钮后模态窗口仍然保留就设置为"false"。该参数在其他SweetAlert触发确认按钮事件时十分有用
closeOnCanceltrueConfirm相同,但是取消按钮
imageUrl-添加自定义图片到警告框上。必须是图片的完整路径
imageSize“80 x 80”当设定图片的路径后,你可以设定图片的大小,格式为两个数字中间带个"x"符号
timernull警告框自动关闭的时间。单位是ms
htmlfalse如果设置为true,将不转义标题和文本参数
animationtrue如果设置为false,模态的动画将被禁用
inputType“text”在使用type:“input”时更改输入字段的类型(如果您希望用户输入其密码,这将非常有用)
inputPlaceholdernull使用输入类型时,可以指定一个占位符来帮助用户
inputValuenull指定在使用类型时希望输入显示的默认文本值:“input”
showLoaderOnConfirmfalse设置为true可禁用按钮,并显示正在加载某些内容


三、弹出效果

112101320466870.jpg

在线演示    插件下载

未经允许不得转载:易读小屋  »  Javascript提示框插件SweetAlert详细讲解