SweetAlert2模態窗的使用

SweetAlert2是一款功能強大的純Js模態消息對話框插件。SweetAlert2用於替代瀏覽器默認的彈出對話框，它提供各種參數和方法，支持嵌入圖片，背景，HTML標簽等，並提供5種內置的情景類，功能非常強大。

SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標簽的問題，並對彈出對話框進行了優化，同時提供對各種表單元素的支持，還增加了5種情景模式的模態對話框。

1. 模態窗的使用演示：

 

//提示信息
swal({
    title: '溫馨提示',
    text: "您好這是一個基本的信息提示框",
    confirmButtonText: '確認',
    confirmButtonColor: 'Green',
});



//成功
swal({
    text: "信息已提交成功！",
    type: "success",
    confirmButtonText: '確認',
    confirmButtonColor: '#4cd964',
});



//錯誤提示
swal({
    text: "對不起信息刪除失敗",
    type: "error",
    confirmButtonText: '確認',
    confirmButtonColor: '#f27474',
});



//警告提示
swal({
    text: "您好，信息正在提交中",
    type: "warning",
    confirmButtonText: '確認',
    confirmButtonColor: '#f8bb86',
});



//普通信息
swal({
    text: "您好，信息正在提交中",
    type: "info",
    confirmButtonText: '確認',
    confirmButtonColor: '#3fc3ee',
});



//提問信息
swal({
    text: "您還沒有關注我們？",
    type: "question",
    confirmButtonText: '確認',
    confirmButtonColor: '#c9dae1',
});



//帶定時的自動關閉的
swal({
    title: "自動關閉",
    text: "將在三秒鍾自動關閉該對話框？",
    showConfirmButton: false,
    timer: 3000
});



//自定義彈窗內容，和按鈕
swal({
    title: '<h2 style="font-weight:bold;color:red">溫馨提示</h2>',
    type: 'info',
    html: '<a href="http://www.baidu.com" style="color:green">自定義的html內容</a>',
    showCloseButton: true,
    showCancelButton: true,
    confirmButtonColor: 'gray',
    cancelButtonColor: '#3fc3ee',
    confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',
    cancelButtonText: ' <i  class="mui-icon mui-icon-trash"></i>確認'
});



//帶反饋的彈窗
swal({
    text: "您還沒有關注我們，建議先關注?",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#f8bb86',
    cancelButtonColor: 'gray',
    cancelButtonText: '取消',
    reverseButtons: true, //控制按鈕反轉
    confirmButtonText: '立即關注',
}).then(function(isConfirm) {
    if(!isConfirm) {
        swal({
            text: "取消了！",
            type: "error",
            confirmButtonText: '確認',
            confirmButtonColor: '#f27474',
        })
    } else {
        swal({
            text: "已成功關注！",
            type: "success",
            confirmButtonText: '確認',
            confirmButtonColor: '#4cd964',
        })
    }
});



//圖片彈窗
swal({
    title: '圖片',
    text: '這是一個自定義的圖片',
    imageUrl: 'imgurl',
    imageWidth: 280,
    imageHeight: 280,
    animation: true, //控制是否有動畫
    confirmButtonText: '陌影真他媽帥',
    confirmButtonColor: '#4cd964',
});



//自定義背景的彈窗
swal({
    title: '<h3 style="color:white">這是一個自定義的背景彈出框</h3>',
    width: 600,
    padding: 100,
    background: '#fff url(http://img2.3lian.com/2014/f5/172/d/31.jpg)',
    showConfirmButton: false,
});



//帶input提交的彈窗，帶ajax提交緩沖效果
swal({
    title: '輸入您的姓名',
    input: 'text',
    confirmButtonText: '提交',
    confirmButtonColor: '#4cd964',
    showLoaderOnConfirm: true, //加載按鈕是否可見
    preConfirm: function() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve();
            }, 5000);
        });
    },
    allowOutsideClick: false //彈框外是否可點
}).then(function(res) {
    if(res) {
        //實際使用過程中將此處換成ajax代碼即可
        swal({
            type: 'success',
            title: 'Ajax 請求完成',
            html: '您的郵箱是: ' + '<strong>' + res + '</strong>',
            confirmButtonText: '確定',
            confirmButtonColor: '#4cd964'
        });
    }
});



//帶結果通知的input
swal({
    title: '請輸入您的姓名',
    input: 'text',
    confirmButtonText: '確定',
    confirmButtonColor: '#4cd964',
    inputValidator: function(value) {
        return new Promise(function(resolve, reject) {
            if(value) {
                resolve();
            } else {
                reject('至少要輸入一個值哦！');
            }
        });
    }
}).then(function(result) {
    if(result) {
        swal({
            title: '結果通知',
            text: '您的名字是: <strong>' + result + '</strong>',
            confirmButtonText: '確定',
            confirmButtonColor: '#4cd964'
        });
    }
});



//帶結果通知的textarea
swal({
        input: 'textarea',
        confirmButtonText: '確定',
        confirmButtonColor: '#4cd964'
    }).then(function(result) {
        if(result) {
            swal({
                title: '結果通知',
                text: '您輸入的是: <strong>' + result + '</strong>',
                confirmButtonText: '確定',
                confirmButtonColor: '#4cd964'
            });
        }
});



//帶下拉框的彈窗
swal({
    title: '請選擇您的姓名',
    input: 'select',
    inputOptions: {
        'xsc': '夏守成',
        'ylj': '楊林靜',
        'William': 'William'
    },
    inputPlaceholder: '選擇你的名字',
    showCancelButton: true,
    confirmButtonText: '確定',
    confirmButtonColor: '#4cd964',
    preConfirm: function() {
        return new Promise(function(resolve) {
            resolve(["楊林靜"]);
        });
    }
}).then(function(result) {
    if(result) {
        swal({
            type: 'success',
            html: '你選擇的是: <strong>' + result[0] + '</strong>',
            confirmButtonText: '確定',
            confirmButtonColor: '#4cd964'
        });
    }
});



//帶有定位和消失的彈窗
Swal({
  position: 'top-end', //定位 左上角
  type: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
});

//自定義 第三方 css 的 彈框 (推薦使用 Animate.css )
Swal.fire({
  title: 'Custom animation with Animate.css',
  animation: false,
  customClass: 'animated tada'
});



//右上角通知類彈窗
Swal.fire({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    type: 'success',
    title: 'Signed in successfully'
});


//示例：
swal({
    'title':'Are you sure?',
    'text':'You will not be able to recover this imaginary file!',
    'type':'warning',                 //提示類型： success(成功)、error(錯誤)、warning(警告)、info(提示)、question(提問)
    'showCancelButton': true,         //控制是否顯示按鈕 true/false
    'showConfirmButton': true,        //控制是否顯示按鈕
    'confirmButtonText': "確定",       //按鈕text
    'cancelButtonText': "取消",        //按鈕text
    'confirmButtonColor': '#DD6B55',   //確認按鈕顏色
    'html':content,                   //自定義彈窗內容，HTML里面傳入自定義的HTML代碼
    'animation': false,　　　　　　　　 // animation表示的是對話框顯示時的動畫。默認動畫是pop（淡出），也可以指定slide-from-top（從上面滑入）和slide-from-bottom（從下面滑入）。如果設為false則沒有動畫。
    'focusCancel': true,              // 是否聚焦 取消按鈕
    'reverseButtons': true,           // 是否 反轉 兩個按鈕的位置 默認是  左邊 確定  右邊 取消
    'closeOnConfirm': false,
    'closeOnCancel': false,
    'position': 'top-end',            //控制模態框的位置
    'timer': 1000,                    //控制顯示時間
    imageUrl: "images/thumbs-up.jpg"  //用於替換Title上方的圖
});

 

 

 2. 模態框內的參數配置

配置參數

參數	默認	描述
title	null	模態對話框的標題。它可以在參數對象的title參數中設置，也可以在swal()方法的第一個參數設置。
text	null	模態對話框的內容。它可以在參數對象的text參數中設置，也可以在swal()方法的第二個參數設置。
html	null	對話框中的內容作為HTML標簽。如果同時提供text和html參數，插件將會優先使用text參數。
type	null	對話框的情景類型。有5種內置的情景類型：warning，error，success，info和question。它可以在參數對象的type參數中設置，也可以在swal()方法的第三個參數設置。
customClass	null	模態對話框的自定義class類。
animation	true	如果設置為false，對話框將不會有動畫效果。
allowOutsideClick	true	是否允許點擊對話框外部來關閉對話框。
allowEscapeKey	true	是否允許按下Esc鍵來關閉對話框。
showConfirmButton	true	是否顯示“Confirm（確認）”按鈕。
showCancelButton	false	是否顯示“Cancel（取消）”按鈕。
confirmButtonText	"OK"	確認按鈕上的文本。
cancelButtonText	"Cancel"	取消按鈕上的文本。
confirmButtonColor	"#3085d6"	確認按鈕的顏色。必須是HEX顏色值。
cancelButtonColor	"#ccc"	取消按鈕的顏色。必須是HEX顏色值。
confirmButtonClass	null	確認按鈕的自定義class類。
cancelButtonClass	null	取消按鈕的自定義class類。
buttonsStyling	true	為按鈕添加默認的swal2樣式。如果你想使用自己的按鈕樣式，可以將該參數設置為false。
reverseButtons	false	如果你想反向顯示按鈕的位置，設置該參數為true。
showLoaderOnConfirm	false	設置為true時，按鈕被禁用，並顯示一個在加載的進度條。該參數用於AJAX請求的情況。
preConfirm	null	在確認之前執行的函數，返回一個Promise對象。
imageUrl	null	為模態對話框自定義圖片。指向一幅圖片的URL地址。
imageWidth	null	如果設置了imageUrl參數，可以為圖片設置顯示的寬度，單位像素。
imageHeight	null	如果設置了imageUrl參數，可以為圖片設置顯示的高度，單位像素。
imageClass	null	自定義的圖片class類。
timer	null	自動關閉對話框的定時器，單位毫秒。
width	500	模態窗口的寬度，包括padding值（box-sizing: border-box）。
padding	20	模態窗口的padding內邊距。
background	"#fff"	"#fff" 模態窗口的背景顏色。
input	null	表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。
inputPlaceholder	""	input域的占位符。
inputValue	""	input域的初始值。
inputOptions	{} 或 Promise	如果input的值是select或radio，你可以為它們提供選項。對象的key代表選項的值，value代表選項的文本值。
inputAutoTrim	true	是否自動清除返回字符串前后兩端的空白。
inputValidator	null	是否對input域進行校驗，返回Promise對象。
inputClass	null	自定義input域的class類。
position	center	控制彈窗的位置，(  top-end左上角  )

 

方法

方法	描述
swal.setDefaults({Object})	當你在使用SweetAlert2時有大量的自定義參數，可以通過swal.setDefaults({Object})方法來將它們設置為默認參數。
swal.resetDefaults()	重置設置的默認值。
swal.queue([Array])	提供一個數組形式的SweetAlert2參數，用於顯示多個對話框。對話框將會一個接一個的出現。
swal.close()或 swal.closeModal()	以編程的方式關閉當前打開的SweetAlert2對話框。
swal.enableButtons()	確認和關閉按鈕可用。
swal.disableButtons()	禁用確認和關閉按鈕。
swal.enableLoading()或swal.showLoading()	禁用按鈕並顯示加載進度條。通常用於AJAX請求。
swal.disableLoading()或swal.hideLoading()	隱藏進度條並使按鈕可用。
swal.clickConfirm()	以編程的方式點擊確認按鈕。
swal.clickCancel()	以編程的方式點擊取消按鈕。
swal.showValidationError(error)	顯示表單校驗錯誤信息。
swal.resetValidationError()	隱藏表單校驗錯誤信息。
swal.enableInput()	使input域可用。
swal.disableInput()	禁用input域。

 

瀏覽器兼容

SweetAlert2可以工作在所有的現代瀏覽器中：

• IE: 10+（需要引入Promise文件）

• Microsoft Edge: 12+

• Safari: 4+

• Firefox: 4+

• Chrome 14+

• Opera: 15+