SweetAlert是一款不需要jQuery支持的原生js提示框,風(fēng)格類似bootstrap。它的提示框不僅美麗動(dòng)人，并且允許自定義，支持設(shè)置提示框標(biāo)題、提示類型、內(nèi)容展示圖片、確認(rèn)取消按鈕文本、點(diǎn)擊后回調(diào)函數(shù)等。

查看演示

下載資源：

1612

次 下載資源

下載積分：

35

積分

HTML

首先放置6個(gè)不同的提示按鈕。

基本示例：點(diǎn)擊這里

提示成功：點(diǎn)擊這里

提示失敗：點(diǎn)擊這里

提示確認(rèn)：點(diǎn)擊這里

定義內(nèi)容：點(diǎn)擊這里

確認(rèn)輸入：點(diǎn)擊這里

接著引入sweetalert相關(guān)組件，該插件不需要jQuery庫(kù)支持。

我們先看下前三種js，其余請(qǐng)看壓縮文件的代碼。 $(".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");

});

警告框提示 swal({

title: "您確定要?jiǎng)h除嗎？",

text: "您確定要?jiǎng)h除這條數(shù)據(jù)？",

type: "warning",

showCancelButton: true,

closeOnConfirm: false,

confirmButtonText: "是的，我要?jiǎng)h除",

confirmButtonColor: "#ec6c62"

}, function() {

$.post(getUrl("Cart/del"), {id: id}, function(data) {

location.reload();

})

});

提示：本地sweetalert可能不支持IE8，但放在服務(wù)器就OK了，保證網(wǎng)頁(yè)html能支持w3c標(biāo)準(zhǔn)即可。

SweetAlert相關(guān)API 參數(shù)

描述

默認(rèn)值

title

提示框標(biāo)題

-

text

提示內(nèi)容

-

type

提示類型，有：success(成功)，error(錯(cuò)誤)，warning(警告)，input(輸入)。

-

showCancelButton

是否顯示“取消”按鈕。

-

animation

提示框彈出時(shí)的動(dòng)畫效果，如slide-from-top(從頂部滑下)等

-

html

是否支持html內(nèi)容。

-

timer

設(shè)置自動(dòng)關(guān)閉提示框時(shí)間(毫秒)。

-

showConfirmButton

是否顯示確定按鈕。

-

confirmButtonText

定義確定按鈕文本內(nèi)容。

-

imageUrl

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

-

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。