俺のクソレシピ

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

CSSアニメーションとJavaScriptで確認ダイアログを作る

今日は前回やろうかと書いていたconfirmのような確認ダイアログを作ってみました。
この記事では、前回の記事を前提に話を進めていくので、前回の記事を読んでない方は前回の記事を読んでからこの記事を読むといいと思います。
ただ使い方だけ知りたいという方は、目次で「使い方」に飛んでください。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

ほとんど前回と同じ

今回作る確認ダイアログは、前回のダイアログと全然変わりませ。前回と違うのは、ボタンを「はい」と「いいえ」の2つ作って、それぞれのボタンが押された時の処理を定義しておくだけです。

実際のプログラム

実際のプログラムは以下のとおりです。

CSS

前回と何が変わったのっていうくらい変わってませんが、ボタンのwidthとmarginが少し変わってます。これはボタンが2つになったので、そのボタンを横に並べるためです。

JavaScript

こちらもあまり変わってません。こっちは、ボタンをinnerHTMLで書く時に「はい」と「いいえ」の2つにボタンが増えています。そして、「はい」と「いいえ」のボタンそれぞれが押された時の処理を定義していて、ダイアログを閉じる関数も「はい」が押された時の処理をするのか「いいえ」が押された時の処理をするかで2つ定義しています。

使い方

使い方は前回とほとんど変わりませんが、一応載せておきます。

まず、HTMLで、

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

をheadに、

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

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

<div id="bottom_confirm_base"></div>

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

bottom_confirm(ダイアログに表示するHTML, 「はい」のボタンに表示する文字, 「いいえ」のボタンに表示する文字, 「はい」のボタンが押された後に実行する関数, 「いいえ」のボタンが押された後に実行する関数);

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

bottom_confirm_yes_hide(); (「はい」が押された時の処理)
bottom_confirm_no_hide(); (「いいえ」が押された時の処理)

を実行してください。


ダウンロード

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

bottom_confirm.zip - Google ドライブ

まとめ

今回は前回に続いてconfirmのような確認ダイアログを作ってみました。ものすごく簡単でしたね。やっぱり元になるものがあるのとないのでは全然違います。今回変えたのは、ボタンを2つに増やしてそれぞれがクリックされた時の処理を書いてあげただけです。CSSを少しいじれば好きなようにデザインできるし、JavaScriptをいじれば自分の好きなように作り変えることが簡単にできるのでぜひやってみてください。今回の記事はここまで!


2017/5/16 追記

背景を暗くする機能をつけてみました。背景は暗くなりますがバックのスクロールとクリックなどはできるままです。

CSS

JavaScript

使い方は

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

の前に

<div id="bottom_dialog_back"></div>

を記述するだけです。

デモ

http://myrecipe.webcrow.jp/bottom_confirm_new/

ダウンロード

bottom_confirm.zip - Google ドライブ