SweetAlert2 (彈窗外掛)
阿新 • • 發佈:2021-02-04
1.直接運用sweetalert2
<style>
.title-class {
color: #fff;
font-weight: 200;
}
</style>
<script src="./js/sweetalert2.all.min.js"></script>
<button class="btn2">點我看動畫哦</button>
<script>
$btn2 = document.querySelector (".btn2");
$btn2.onclick = function () {
Swal.fire({
position: "bottom-end", // 出現位置,右下角
title: "您暫時沒有許可權登入... 即將為您跳轉回到登入頁...",
showConfirmButton: false, // 不顯示確認按鈕
background: "#F4506B",
toast: true, // toast為false的話是彈窗形式彈出,有遮罩層。預設為false
width: "300px",
padding: "10px",
icon: "error",
iconColor: "#fff",
// animation: false, // 彈出的動畫
customClass: {
title: "title-class", // 自定義樣式
},
});
};
</script>
在頁面中的樣子:
2.angular中運用sweetalert2
(1)先安裝: npm install sweetalert2
(2)在ts中引入:
import Swal from 'sweetalert2';
(3)運用:
Swal.fire({
... // 寫屬性就可以
});
官方網站: https://www.sweetalert2.cn/.