0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

sweetalert2で出したウィンドウを自動的に消した後になにか処理を入れる(メモ)

Posted at

個人開発でLINEボット(https://qiita.com/skyfish20ch/items/7e0ec382292fa660f8d5)を作っています。

しばらく何もしていなかったのですがherokuの無料枠がなくなるタイミングで、エンジニアの端くれとして
自分のWEBサーバーくらい持っててもいいかもと思い、課金をしました。

そこでまた手を入れていこうとしたときに、ユーザーが投稿した情報に「いいね」とか「コメント」とか
残したいなと思ったときに、javascriptがあんまりわからないのでページの遷移で対応しようかと思ったのですが
著しく操作性が落ちるので、、

どうしようかと思った時に、javascriptのpromotで良いんじゃないかとやってみたらデザインが、、、

そこで行き着いたsweetalert2!

タイマー値をセットすれば自動で消えるし、HTMLでメッセージとか書けるし最高ですね

よくSNSで「いいね」した時に、ポッと♥が出て消えるみたいなのやりたかったのでそのメモです

sa2.js
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

	Swal.fire({
		width:"8em",//ウィンドウの横幅
  		html: '<font color=red size=5>♥</font><br><font size=2>LIKE!</font>',
		showConfirmButton:false,//デフォルトで出ているconfirmボタンを隠す
		timer:"800",//800ms後に自動で消す
		willClose: () => {
        	//ここにウィンドウが消えた後の処理をいれる
		}
	});

こんな感じです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?