头像

SweetAlert - 演示6种不同的提示框效果

来源:http://www.sucaihuo.com/js/190.html 素材火管理员 2015-06-14 06:37浏览(59474) 收藏

SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
SweetAlert - 演示6种不同的提示框效果
分类:其它特效 > jQuery插件 难易:初级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ1556472052直接充值

查看演示 下载资源: 1595 下载资源 下载积分: 35 积分

HTML

首先放置6个不同的提示按钮。

<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>
<div class="demo_5">
    定义内容:<button>点击这里</button> 
</div>
<div class="demo_6">
    确认输入:<button>点击这里</button> 
</div>

接着引入sweetalert相关组件,该插件不需要jQuery库支持。

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

我们先看下前三种js,其余请看压缩文件的代码。

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

警告框提示

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相关API

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

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1556472052

  • 头像 21楼
    07-18 10:02
    aa***il
    感觉这个很实用,是我想要的
  • 头像 20楼
    07-04 10:03
    飞***梦
    下载使用一下,效果不错
  • 头像 19楼
    05-17 10:42
    随***事
    不错。真心挺喜欢的这个样式
  • 头像 18楼
    01-08 16:54
    追***逐
    刚开始学,这个好厉害呀!
  • 头像 17楼
    01-02 14:56
    薄***茶
    sweet alert 确认框关闭缓慢,导致是和否选项可以都点一遍,有遇到过这种问题的吗。
    1
    素材火管理员

    没发现有这种情况

  • 头像 16楼
    12-01 13:30
    野***子
    很好又学到了很多东西
  • 头像 15楼
    11-22 14:11
    小***쌤
    很好又学到了很多东西
  • 头像 14楼
    09-30 14:56
    JH***JH
    很有帮助
  • 头像 13楼
    09-05 18:26
    于***哈
    厉害厉害
  • 头像 12楼
    08-27 14:35
    !C***+Z
    nice!!!!!!!!!!!!!!!!
1 2