...

【jQuery】秒で作れる!画面上部から出てくるアラートボックスを作る方法

jQueryで上から出てくるアラートボックス

どうもおはようポテト(@ohayoupoteto22)です。

投稿型サイトなどでよく見る「上からニュッと通知が出てくる」アレ。

そんな”アラートボックス”に対して多くの方が抱く疑問がこちら。

上から出てくるアラートボックスってどうやって作るん?

ということで今回は

「Twitterみたいに画面上部から出てくるアラートボックスを作りたい」

「上からニュッと出てくるアラートボックスを実装したい」

という方に向けて「jQueryで画面上部から出てくるアラートボックスを作る方法」をまとめました。

自分のための備忘録でもありますが参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

アラートボックスの完成イメージ

このように上からニュッとスライドしてきて、一定時間経つとフェードアウトしていくようなアラートボックスです。

上の「分かりました」というボタンを押すことでアラートを消すこともできます。

デモページはこちら

ブログ主

簡単に再現できるようにデザインは簡素なものにしています(言い訳)

 

手順

とても簡単なので秒で作ることができます。(秒で作れるとは言ってない)

手順

step1
HTMLとCSSを記述
step2
アラートボックスを非表示にする
step3
クリックすると上からスライドするようにする
step4
フェードアウトさせる
step5
おまけ:手動でアラートボックスを非表示にする
早速作ろう!

ソロモン

画面上部から出てくるアラートボックスを作る方法

HTMLとCSSを記述

まずアラートボックスの型を作っちゃいましょう

HTML

<div class="alert-box">
  <p class="alert">
    〜アラートボックス〜
  </p>
</div>
<button class="button_open">通知が出るよ</button>

CSS

.alert-box{
  position: absolute;
  top:0;/*上に配置*/
  width:100%;
  height:90px;
  background-color:rgb(245, 154, 124);
  text-align:center;
  padding-top:0px;
  color:#fff;
}
.alert{
  margin-bottom:5px;
  font-size:.9em;
}
.button_open{
  position: absolute;
  top:30%;
  left:50%;
  transform : translate(-50%,-50%);
}

 

こんな感じの仁王立ち状態のものができたと思うので、上からスライドしてくるようにしましょう。

アラートボックスを非表示にする

.alert-box{
  display:none;

(以下略)

 

クリックすると上からスライドするように

今回はボタンをクリックした際に着火してアラートボックスが降りてくるようにしましょうか。

$(".button_open").click(function(){
  $(".alert").text("※通知だよ 通知だよ 通知だよ 通知だよ 通知だよ");
  $(".alert-box")
  .slideDown()
});

中のテキストを書き換え、アラートボックス自体をslideDownで降ろしてきています。

それっぽいものができましたね。

では次にそのアラートボックスが自動でフェードアウトするようにしていきましょう。

フェードアウトさせる

$(".button_open").click(function(){
  $(".alert").text("※通知だよ 通知だよ 通知だよ 通知だよ 通知だよ");
  $(".alert-box")
  .slideDown()
  .delay(3000)/*3秒遅延*/
  .fadeOut();
});

「delay(3000).fadeOut()」で3秒後にフェードアウトするようにしています。

これだけでもいい気がしますが、手動で非表示にできるようにしていきますか⸝⸝- ̫ -⸝⸝

おまけ:手動でアラートボックスを非表示にする

pタグの下に追加

<button class="button_close">分かりました</button>

アラートボックス内にボタンを追加します。

 

 CSSファイルに追記

.button_close{
  opacity: .5;
  font-size: .7em;
}

これでボタンをちょいと装飾。

 

jsファイルに追記

$(".button_close").click(function(e){
  $(".alert-box")
  .stop(true)/*遅延を無効*/
  .fadeOut();
});

これでアラートボックス内のボタンを押すと非表示になりますね。

以上で完成となります⸝⸝- ̫ -⸝⸝

お疲れ様!

ソロモン

最後に:アラートボックスってかっこいいよね

以上となります。

これを応用すればブラウザ自体のアラートボックスも再現できそうですよね!

参考になりましたらシェアなどしていただけると幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA