漂亮实用的提示框SweetAlert插件

漂亮实用的提示框SweetAlert插件

更新: 2015-11-11

阅读:1632

开源:GitHub

SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义。

SweetAlert插件提供了很多选项设置,可以通过自定义很多属性参数等信息来满足项目开发需求。 title:提示框标题。 text:提示内容。 type:提示类型,有:success(成功),error(错误),warning(警告),input(输入)。 showCancelButton:是否显示“取消”按钮。 animation:提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等。

插件安装

首先我们必须将SweetAlert插件的js文件和css文件引入到页面中。

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

使用方法

$("#btn1").click(function(){ 
    swal("Here's a message!"); 
}); 

另外支持设置提示类型、带图标的提示框、确认取消提示框,如同javascript的confirm()函数、点击后回调函数、自动关闭提示框、AJAX操作等点击这里看演示

参数说明

  • title:提示框标题
  • text:提示内容
  • type:提示类型,有:success(成功),error(错误),warning(警告),input(输入)
  • showCancelButton:是否显示“取消”按钮
  • animation:提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等
  • html:是否支持html内容
  • timer:设置自动关闭提示框时间(毫秒)
  • showConfirmButton:是否显示确定按钮
  • confirmButtonText:定义确定按钮文本内容
  • imageUrl:定义弹出框中的图片地址