あるサイトで使っているalertの作り方を知りたいです。

https://webllica.com/jquery-text-edit-get-add-del/
このサイトの「テキストボックス内データの取得処理」でやっているalertの作り方を知りたいです。

オレンジ色の枠が、出てきて数秒たつと消えるエフェクトのコードの書き方がわかりません。
通常のalertは、出てきたらOKボタンを押さないといけないと思うのですが、このサイトでは数秒たつと消えるようになっています。

未熟な私では、さっぱりわかりません。
みなさんの頭脳をおかしください。

行動規範の内容に同意します

回答3件

ベストアンサー

Chrome DevToolを使用すれば
以下のHTMLとCSSがわかります。

JavaScriptでwidth値を変更してアニメーションになっていますが
CSSアニメーションに変えたほうが良いです。

html
1<div id="loadingMsg" class="disp-none b center" style="display: none;">テスト</div>

css
1#loadingMsg {
2  width: 300px;
3  margin: 0 0 0 -150px;
4  padding: 15px 0;
5  border: 5px solid orange;
6  border-top: 0;
7  border-radius: 0 0 30px 30px;
8  z-index: 100;
9  position: fixed;
10  top: 0;
11  left: 50%;
12  background-color: #FFF;
13  opacity: .95;
14}
15.disp-none {
16  display: none;
17}