naritoブログ

【お知らせ】
新ブログができました。今後そちらで更新し、このサイトは更新されません(ウェブサイト自体は残しておきます)
このブログの内容に関してコメントしたい場合は、新ブログのフリースペースに書き込んでください

このブログの内容を新ブログに移行中です。このブログで見つからない記事は、新ブログにありま

SweetAlertで、カッコいいアラート

約858日前 2017年2月19日6:32
プログラミング関連
お洒落なCSS・JS Bootstrap4 SweetAlert
JavaScriptの通常のalertは、お世辞にもカッコいいとは言えません。
しかし、SweetAlertを使うと、簡単にカッコいいアラートが作成できます。

公式サイト
http://t4t5.github.io/sweetalert/

このような通常のアラートや


ちょっとしたエフェクト付きのもの


警告っぽくしたり、ボタンを2つ用意したり...これはYesを押すと、またアラートが表示されます



入力欄つきのもありますね



こんな感じに、画像を自分で指定したりもできます。


デモ
https://torina.top/media/html/alert1_hCyl0RB.html


上の例でもありましたが、この手のアラートは削除前の確認であったり、重要なアクションの前に表示することが多いでしょう。
最近気が付きましたが、paizaなんかも開始前にSweetAlertで確認を出してますね。

例えば、以下のようなページです。職を探せるサイトなんかによくありそうな感じです。結構自信作な見た目です。


Webからエントリーを押すと、こんな感じに表示され


エントリーすると、こんな感じに。


デモページ
https://torina.top/media/html/alert.html


SweetAlertを使って、submit前に確認をしたい場合は以下のような感じで作れます。

<form action="" method="POST">
<button type="button" class="delete" oncick="">削除</button>
</form>

<script>
$('.delete').on('click',function(e){
e.preventDefault();
var form = $(this).parents('form');
swal({
title: "確認",
text: "削除してよろしいですか?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(isConfirm){
if (isConfirm) form.submit();
});
});
</script>
名無し 約241日前 2018年10月28日19:00 返信する
a タグの中に <br> が含まれてしまっていて、
画像が表示されていません。
なりと 約238日前 2018年10月31日20:05
ありがとうございます、修正しました。