そういった場合に今回紹介をする"sweetalert2"をお勧めします。
jQueryは不要で以下の記述のみで利用できます。
|
1 2 3 4 5 6 7 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.7.0/sweetalert2.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.7.0/sweetalert2.css"> <!-- IE・Androidのブラウザで利用する際に必要 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script> ボタンをクリックすると表示<br /> <input type="button" value="SweetAlert2" onclick="swal('SeetAlert2!');"> |
↓実際の動作
ボタンをクリックすると表示
今回紹介する内容は"alert"と同じようにメッセージを出すだけのサンプルになりますが、この他にもメッセージボックス内に直接HTMLのコードを埋め込めたり、デザイン自体もCSSで変更が可能です。
配布元のサイトは下記になります。
