Sweet Alert
http://www.dglives.com/demo/sweetalert-master/example/
Sweet Alert
A beautiful replacement for Javascript's "Alert"
So... What does it do?
Here’s a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using sweetAlert.
Normal alert
Code:
alert("Oops... Something went wrong!");
Sweet Alert
Code:
sweetAlert("Oops...", "Something went wrong!", "error");
Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!
More examples
In these examples, we're using the shorthand function swal to call sweetAlert.
A basic message
swal("Here's a message!")
swal({
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: "images/thumbs-up.jpg"
});
Download & install
Method 1: Install through bower:
$ bower install sweetalert
Method 2: Download the sweetAlert CSS and JavaScript files.
Initialize the plugin by referencing the necessary files:
<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">Call the sweetAlert-function after the page has loaded
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
Configuration
Here are the keys that you can use if you pass an object into sweetAlert:
Argument | Default value | Description |
---|---|---|
title | null (required) | The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function. |
text | null | A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function. |
type | null | The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". It can either be put in the array under the key "type" or passed as the third parameter of the function. |
allowOutsideClick | false | If set to true, the user can dismiss the modal by clicking outside it. |
showCancelButton | false | If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal. |
confirmButtonText | "OK" | Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK". |
confirmButtonColor | "#AEDEF4" | Use this to change the background color of the "Confirm"-button (must be a HEX value). |
cancelButtonText | "Cancel" | Use this to change the text on the "Cancel"-button. |
closeOnConfirm | true | Set to false if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert. |
imageUrl | null | Add a customized icon for the modal. Should contain a string with the path to the image. |
imageSize | "80x80" | If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height. |
Contribute
SweetAlert was created by Tristan Edwards, you can follow him on Twitter or Dribbble for updates and other cool projects!
Feel free to fork sweetAlert on GitHub if you have any features that you want to add!
TE • 2014
A title with a text under
swal("Here's a message!", "It's pretty, isn't it?")
A success message!
swal("Good job!", "You clicked the button!", "success")
A warning message, with a function attached to the "Confirm"-button...
swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});... and by passing a parameter, you can execute something else for "Cancel".
swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});A message with a custom icon
Sweet Alert的更多相关文章
- 漂亮的各种弹出框 sweet alert
Sweet Alert 是一个替代传统的 Alert 的提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒. 还带下拉 几种 动画效果 弹窗 ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- 好看的dialog,sweet Alert Dialog 导入Android Studio
系统自带的dialog实在是丑到无法忍受.所以找到了一款比较好的第三方dialog. github 地址如下:https://github.com/pedant/sweet-alert-dialog ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- 基于jquery的响应式提示框SweetAlert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...
- GitHub Top 100的Android开源库
摘要: 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据GitHub搜索Java语言选择「Best M... 本项目主要对目前 GitH ...
- android UI库
https://github.com/wasabeef/awesome-android-ui List of Android UI/UX Libraries A curated list of awe ...
- Android Studio插件
awesome-android-ui(UI范例库) https://github.com/wasabeef/awesome-android-ui/tree/master/pages LMBanners ...
- 关于abp中使用的sweetalert对话框组件的confirm确认对话框中的一个坑
今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的sweet alert组件. abp框架前端集成了sweet alert 对http请求的error做了全局处理,我在 ...
随机推荐
- Cognos10安装注意事项
cognos10用db2做content management注意事项 1. 建议用UTF-8格式字符2. 建议pagesize用8K或者8K以上3. 新建数据库缓冲池pagesize和以上1.2设置 ...
- django服务器配置
服务器配置是Ubuntu14.04 64位OS ubuntu14.04默认是安装好了python2.7版本不用自己安装了. 先更新下源 sudo apt-get update 第一步先安装pip su ...
- 初识ReactJs(一)
React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...
- 常看常遇见之一——BS架构VS CS架构
常看常遇见之一——BS架构VS CS架构 1.BS架构 即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构.在这种结构下,用户 ...
- glob模式
在学习gulp的过程中,gulp使用了被称作为glob的文件匹配模式. 接下来我们认识下什么是glob模式. 在计算机编程中,特别是类Unix环境,glob模式通过通配符来匹配文件名.例如:Unix命 ...
- CSS3 仿微信聊天小气泡
今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...
- mysql数据库使用
C#操作Mysql数据库的存储过程,网址 DATEDIFF() 函数返回两个日期之间的天数. 语法 DATEDIFF(date1,date2) date1 和 date2 参数是合法的日期或日期/时间 ...
- 15个实用的jQuery代码片
(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadI ...
- POJ2774 (后缀数组)
#include<cstdio> #include<cstring> using namespace std; ],b[]; ],x[],wv[],ws[],h[],rank[ ...
- 关于sysprocesses表各字段的作用
sysprocesses 表中保存关于运行在 Microsoft® SQL Server™ 上的进程的信息.这些进程可以是客户端进程或系统进程.sysprocesses 只存储在 master 数据库 ...