JavaScript SweetAlert外掛程式實現超酷訊息警告框_javascript技巧

今天給大家推薦一款不錯的超酷訊息警告框–SweetAlert；SweetAlert是一款不需要jQuery支援的原生js提示框,風格類似bootstrap。它的提示框不僅美麗動人，並且允許自訂，支援設定提示框標題、提示類型、內容展示圖片、確認取消按鈕文本、點擊後回呼函數等。和傳統的alert相比：

SweetAlert 能在頁面自動置中，支援案頭環境，移動端和平板，並且高度自訂。接下來看看它的具體使用！

HTML

首先引入相應的js和css，該外掛程式不需要jQuery外掛程式的支援：

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

然後放置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>

JavaScript

定義js事件：

$(function() {$(".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() {$.ajax({url: "do.php",type: "DELETE"}).done(function(data) {swal("操作成功!", "已成功刪除資料！", "success");}).error(function(data) {swal("OMG", "刪除操作失敗了!", "error");});});});$(".demo_5 button").click(function() {swal({title: "Good!",text: '自訂<span style="color:red">圖片</span>、<a href="#">HTML內容</a>。<br/>5秒後自動關閉。',imageUrl: "images/thumbs-up.jpg",html: true,timer: 5000,showConfirmButton: false});});$(".demo_6 button").click(function() {swal({title: "輸入框來了",text: "這裡可以輸入並確認:",type: "input",showCancelButton: true,closeOnConfirm: false,animation: "slide-from-top",inputPlaceholder: "填點東西到這裡面吧"}, function(inputValue) {if (inputValue === false)return false;if (inputValue === "") {swal.showInputError("請輸入!");return false}swal("棒極了!", "您填寫的是: " + inputValue, "success");});});});