SweetAlert2

簡介

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

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

安裝

可以通過bower或npm來安裝sweetalert2對話框插件。

  • bower install sweetalert2
  • npm install sweetalert2

使用

使用SweetAlert2對話框需要在頁面中引入sweetalert2.min.css和sweetalert2.min.js文件，為了兼容IE瀏覽器，還需要引入promise.min.js文件。

<link rel="stylesheet" type="text/css" href="path/to/sweetalert2/dist/sweetalert2.min.css">
<script src="path/to/sweetalert2/dist/sweetalert2.min.js"></script>
<!-- for IE support -->
<script src="path/to/es6-promise/promise.min.js"></script>

基本使用：

基本的使用方法是使用通過swal()來彈出一個對話框。

swal('hello world!');

如果要彈出一個帶情景模式的對話框，情景模式類型可以如下在第三個參數中設置。

swal('Oops...', 'Something went wrong!', 'error');

swal(...)會返回一個Promise<boolean>對象，該Promise對象中then方法中的isConfirm參數的含義如下：

  • true：代表Confirm（確認）按鈕。
  • false：代表Cancel（取消）按鈕。
  • undefined：代表按下Esc鍵，點擊取消按鈕或在對話框之外點擊。

模型對話框的類型

sweetalert2提供了5種情景模式的對話框。

效果演示

嵌入函數的彈窗

鏈式彈窗示例

通過SweetAlert2還可以實現各種效果，如定時關閉，自定義彈窗的大小，背景，加入動畫等等，更多的效果演示和具體操作可以訪問SweetAlert2的官網

鏈接：https://sweetalert2.github.io/

瀏覽器兼容性

IE11 * Edge chrome 火狐 Safari 歐朋 Android瀏覽器* UC瀏覽器*
 ✅  ✅   ✅ ✅  ✅ ✅        ✅     ✅

 

*應包括ES6 Promise polyfill，請參閱使用示例。

需要注意的是SweetAlert2 不且將不提供任何形式的IE10和更低的支持或功能。

相關的github項目