俺のクソレシピ

おもにプログラミングについて俺の趣味についてテキトーに書いています。

記事一覧

CSSアニメーションとJavaScriptで下から出てくるダイアログを作る

今回は、前回の記事で紹介したデジタル時計とアナログ時計とアラームを組み合わせたもので使った、俺が作ったダイアログを凡用化して作り直したので紹介します。
解説なんてどうでもいいから早く使いたいという方は、目次で使い方まですっ飛ばしてください。
ちなみに、jQueryは全く使っていません。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

CSSアニメーションについて

CSSアニメーションではJavaScriptなどを使わなくても簡単にキーフレームを指定したアニメーションを実現することができます。cssアニメーションについて詳しくは下記リンクで詳しく解説されています。

CSSアニメーション 入門 - Qiita

今回は先にキーフレームだけCSSで定義しておいて、あとでJavaScriptでアニメーションを定義するというふうにしています。CSSのコードは以下のとおりです。


JavaScriptCSSアニメーション

JavaScriptCSSアニメーションを使うのは実に簡単です。JavaScriptCSSアニメーションを使うにはまずJavaScriptCSSを操作しないといけません。というかそれだけです。JavaScriptCSSを操作するには次のように書きます。

要素.style.プロパティ = "値"; (値は文字列です)

そして今回はCSSアニメーションなので、

要素.style.animation = "値";

のようにして書きます。コードは次のようになりました。

まず引数についてですが、第一引数はダイアログに表示する文字です(HTMLもOK)。第二引数はボタンに表示する文字で、第三引数はボタンがクリックされた後に実行する関数です。そしてinnerHTMLでダイアログに表示する文字とボタンを追加します。次に、CSSアニメーションでダイアログを表示します。ダイアログを表示して、ボタンがクリックされたらダイアログを非表示にして、第三引数で受け取った関数をsetTimeoutで2秒後に実行します。なぜ2秒後に実行するのかというと、アニメーションに2秒かけているので、2秒後に実行しないと、ダイアログが完全に非表示になる前に実行されてしまうからです。ちなみに、bottom_dialog_hideという関数はボタンを押さなくてもダイアログを非表示にできるというものです。

使い方

使い方は簡単です。

まず、HTMLで、

<link rel="stylesheet" href="http://myrecipe.webcrow.jp/bottom_dialog/bottom_dialog.css">

をheadに、

<div id="bottom_dialog_base"></div>
<script src="http://myrecipe.webcrow.jp/bottom_dialog/bottom_dialog.js"></script>

をbodyに記述します。
このとき、

<div id="bottom_dialog_base"></div>

は、一番手前に配置してください。ほとんどの場合は、実際に表示するところの一番後ろに記述すれば大丈夫です。
そして、JavaScript

bottom_dialog(ダイアログに表示するHTML, ボタンに表示する文字, ボタンが押された後に実行する関数);

というように関数を呼び出せばOKです。第三引数の関数で引数を渡したいときは無名関数の中で関数を呼び出してください(setTimeoutのような感じ)。
もし、ボタンがクリックされなくてもダイアログを閉じたい場合は

bottom_dialog_hide();

を実行してください。


ダウンロード

ダウンロードして使いたい方はこちらから

bottom_dialog.zip - Google ドライブ

まとめ

どうでしょうか。今回はalert的なものを作ってみましたが、自分で作ると結構カスタマイズできる、というか無限にカスタマイズできるのでいいですよね。この応用としてconfirmのような確認ダイアログを作ってみるのもまたいいと思います。今度できたら確認ダイアログの方も紹介しようかな。では、今日はこのへんで。