トップ画像イメージ

素のjsとcssでシンプルなモーダルを利用できるコードを書いてみました

皆様、javascriptのalert関数を利用されていますか? このalert関数やconfirm関数は、ユーザーに情報をさせたり、簡単な意思確認をする分には手軽で便利です。 しかし、以下の点において、業務システムで利用するには不便だな・・・と感じることがあります。

  • alert関数を実行すると、ユーザーがOKを押すまで処理の実行が停止するため、バックグラウンドで処理を継続させられない・・・
  • ブラウザによっては、画面の上部の方に表示される・・・(画面上下中央に表示したい)
  • confirmでは2択の選択だし、押せるボタンが「OK」と「キャンセル」・・・(いいえ、はい とか文言を選びたい)
  • 全部白抜きの画面で表示されるため、「警告情報」とか、「エラー」とか表示させたい。

ということで、alert関数やconfirm関数の代替とできるように、素のjavascript(jquery非使用)とcssでシンプルなモーダルを表示させるコードを書いてみました。

使用イメージ

ユーザーへのお知らせ情報の例 モーダルイメージ

ユーザーにエラーメッセージを伝える モーダルイメージ2

以下の項目をデフォルトで指定できます

  • モーダルヘッダーの文言、モーダル本文の文言、モーダルヘッダーの色(デフォルトで数種類用意。css拡張により、自由に設定可能)
  • ボタンに表示する文言、ボタンの色、ボタンを押した時に発生するイベント、ボタンの数(数に制限はありませんが、表示領域の都合上、3個くらいが適切と思われます)

ソース

githubに公開しています。

使用方法

githubにあげているjsおよびcssファイルをダウンロードし、読み込んで、以下のように使用できます。

//example

const yesEvent = () => { alert('はいを押したときのイベントです'); }
const noEvent = () => { alert('いいえを押したときのイベントです'); }
let modal = new SimpleAlert(
      {title:'エラー',body:'文字数は25文字以内で入力してください',category:'danger'},
      [{text:'いいえ',event:noEvent,color:'secondary'},{text:'はい',event:yesEvent,color:'success'}],
      'open-modal'
    );
modal.modalOpen();
//特定の要素(dom)にクリックイベントでモーダルを開かせるようにしたい場合は、以下のメソッドを実行
modal.addOnclick();

new SimpleAlertクラスのインスタンスを生成時に、引数を渡し、モーダルのプロパティを指定します。

  • 第1引数(モーダルのプロパティ)
    • {title:モーダルヘッダーに表示する文言,body:モーダルのボディに表示する文言,category:ヘッダーの色を指定する(色については別途説明)}
  • 第2引数(ボタンのプロパティを配列で引き渡す)
    • [ {text:ボタンに表示する文言,event:クリック時に行いたい処理を引き渡す,color:ボタンの色を指定する(ヘッダーの色種類と同じ)} ]
    • 表示させたいボタンの数だけ配列でプロパティを引き渡す(上記例の場合は2つ)
    • 左から順にボタンは表示されます
  • 第3引数(モーダルを表示させるイベントを仕込みたい要素がある場合、要素のidを引き渡す)必須ではありませんので、引き渡さなくても良い
    • 上記例では'open-modal'というidを持つ要素を指定し、addOnclick()という関数で、クリックイベントでモーダルが開くように設定しています

ボタン・モーダルヘッダーの色のデフォルトセット

bootstrap様を参考にさせていただき、色のデフォルトセットを以下のように準備しております。

.danger{
  background-color: #dc3545;
  color: #fff;
}


.warning{
  background-color: #ffc107;
  color: #fff;
}

.primary{
  background-color: #007bff;
  color: #fff;
}

.success {
  background-color: #28a745;
  color: #fff;
}

.secondary {
  background-color: #6c757d;
  color: #fff;
}

.info {
  background-color: #17a2b8;
  color: #fff;
}

.light {
  background-color: #f8f9fa;
  color:rgb(43, 39, 39);
}

まとめ

  • jqueryやライブラリに依存しない素のjsとcssだけで作ってみた
  • chromeだとalertやconfirmが画面上部に出てきて、見にくかったので、画面中央に来るようにした
  • 現時点でモバイル向けの利用を考慮していない