SweetAlert是一款不需要jQuery支持的原生js提示框,風格類似bootstrap。它的提示框不僅美麗動人，并且允許自定義，支持設置提示框標題、提示類型、內容展示圖片、確認取消按鈕文本、點擊后回調函數等。

查看演示

下載資源：

1612

次 下載資源

下載積分：

35

積分

HTML

首先放置6個不同的提示按鈕。

基本示例：點擊這里

提示成功：點擊這里

提示失敗：點擊這里

提示確認：點擊這里

定義內容：點擊這里

確認輸入：點擊這里

接著引入sweetalert相關組件，該插件不需要jQuery庫支持。

我們先看下前三種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

定義彈出框中的圖片地址。

-

總結

以上是生活随笔為你收集整理的swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。