快捷導(dǎo)航

JavaScript SweetAlert插件實(shí)現(xiàn)超酷消息警告框

更新時(shí)間：2016年01月28日 17:16:08 投稿：mrr

SweetAlert是一款使用純js制作的消息警告框插件.這篇文章主要介紹了JavaScript SweetAlert插件實(shí)現(xiàn)超酷消息警告框的相關(guān)資料,需要的朋友可以參考下

今天給大家推薦一款不錯(cuò)的超酷消息警告框–SweetAlert；SweetAlert是一款不需要jQuery支持的原生js提示框,風(fēng)格類似bootstrap。它的提示框不僅美麗動(dòng)人，并且允許自定義，支持設(shè)置提示框標(biāo)題、提示類型、內(nèi)容展示圖片、確認(rèn)取消按鈕文本、點(diǎn)擊后回調(diào)函數(shù)等。和傳統(tǒng)的alert相比：

這里寫圖片描述

SweetAlert 能在頁面自動(dòng)居中，支持桌面環(huán)境，移動(dòng)端和平板，并且高度自定義。接下來看看它的具體使用！

HTML

首先引入相應(yīng)的js和css，該插件不需要jQuery插件的支持：

<link rel="stylesheet" type="text/css" />
<script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

然后放置6個(gè)不同的按鈕：

<div class="demo_1">
基本示例：<button>點(diǎn)擊這里</button> 
</div>
<div class="demo_2">
提示成功：<button>點(diǎn)擊這里</button> 
</div>
<div class="demo_3">
提示失?。?lt;button>點(diǎn)擊這里</button> 
</div>
<div class="demo_4">
提示確認(rèn)：<button>點(diǎn)擊這里</button> 
</div>
<div class="demo_5">
定義內(nèi)容：<button>點(diǎn)擊這里</button> 
</div>
<div class="demo_6">
確認(rèn)輸入：<button>點(diǎn)擊這里</button> 
</div>

JavaScript

定義js事件：

$(function() {
$(".demo_1 button").click(function() {
swal("這是一個(gè)信息提示框!");
});
$(".demo_2 button").click(function() {
swal("Good!", "彈出了一個(gè)操作成功的提示框", "success");
});
$(".demo_3 button").click(function() {
swal("OMG!", "彈出了一個(gè)錯(cuò)誤提示框", "error");
});
$(".demo_4 button").click(function() {
swal({
title: "您確定要?jiǎng)h除嗎？",
text: "您確定要?jiǎng)h除這條數(shù)據(jù)？",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的，我要?jiǎng)h除",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "do.php",
type: "DELETE"
}).done(function(data) {
swal("操作成功!", "已成功刪除數(shù)據(jù)！", "success");
}).error(function(data) {
swal("OMG", "刪除操作失敗了!", "error");
});
});
});

$(".demo_5 button").click(function() {
swal({
title: "Good!",
text: '自定義<span style="color:red">圖片</span>、<a href="#">HTML內(nèi)容</a>。<br/>5秒后自動(dòng)關(guān)閉。',
imageUrl: "images/thumbs-up.jpg",
html: true,
timer: 5000,
showConfirmButton: false
});
});

$(".demo_6 button").click(function() {
swal({
title: "輸入框來了",
text: "這里可以輸入并確認(rèn):",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "填點(diǎn)東西到這里面吧"
}, function(inputValue) {
if (inputValue === false)
return false;
if (inputValue === "") {
swal.showInputError("請(qǐng)輸入!");
return false
}
swal("棒極了!", "您填寫的是: " + inputValue, "success");
});
});
});

您可能感興趣的文章: