Web開発 - SweetAlert2：Alertをポップにするライブラリ

初めに

　本記事は、SweetAlert2というアラートををポップにするライブラリを紹介します。

Index

初めに
Index
SweetAlert2とは
例文

SweetAlert2とは

　SweetAlert2とは、カスタマイズ可能なアラート（通知）を作成するための JavaScript ライブラリです。

通常	SweetAlert2

sweetalert2.github.io

例文

　SweetAlert2を使うには、npm を用いてインストールするか、CDNを用いてインストールする必要があります。

　下記の例では、CDNから読み込んでいます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert2 Example</title>
    <!-- SweetAlert2のスタイルシートとスクリプトをCDNから読み込む -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.14.0/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.14.0/dist/sweetalert2.min.js"></script>
</head>
<body>

<!-- SweetAlert2を呼び出すボタン -->
<button onclick="showSweetAlert()">Click me</button>

<!-- SweetAlert2呼び出し用のスクリプト -->
<script>
    function showSweetAlert() {
        // SweetAlert2を使用したアラートの表示
        Swal.fire({
            title: 'Hello, World!',
            text: 'This is a simple SweetAlert2 example.',
            icon: 'success',
            confirmButtonText: 'OK'
        });
    }
</script>

</body>
</html>