[ウェブデザイン]きれいなAlertウィンドウを使いましょう!SweetAlert2

JavaScriptを使ったWebプログラミングではAlert関数がよく使われます.
Alertはユーザーに注意するために使用されます.
JavaScriptのalertは、非常に基本的なブラウザUIを提供します.

しかし、このようなヒントウィンドウよりもきれいなヒントウィンドウがほしいです.

SweetAlert2!!

sweetalert2.github.io/
このリンクに入ると、サイトはもともと関連内容がよく説明されているので、詳しく説明することはありませんが、
基本的な機能を簡単に紹介しましょう.

1.設定

1)npmでのインストール
npmに入力した場合:
npm install sweetalert2
yarn add sweetalert2

2.きれいなデフォルトAlertを使う

デフォルトでは、Alert形式を使用する場合は、次のコードを参照してください.

$().ready(function () {
	$("#alertStart").click(function () {
		Swal.fire({
        		icon: 'success', // Alert 타입
			title: 'Alert가 실행되었습니다.', // Alert 제목
			text: '이곳은 내용이 나타나는 곳입니다.', // Alert 내용
		});
	});
});

3.ASTとして使用

SweetAlertを使うと窓が大きすぎる気がします
「小さいヒント窓があったらどうなるの?」そんな思いがある方にはトースト機能をご紹介します

const Toast = Swal.mixin({
    toast: true,
    position: 'center-center',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

Toast.fire({
    icon: 'success',
    title: 'toast 알림이 정상적으로 실행 되었습니다.'
})

P.S.SweetAlert 2角タイプ概要

SweetAlert 2では、次の5つのタイプがサポートされています.そのため、必要に応じて使用できます.