[Javascript] alertやconfirmを見栄え良くデザインできる「Modal-JS」ライブラリ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

MicrosoftのIEブラウザが嫌いなエンジニアは多いのですが、まだまだ世の中で使われているWEBブラウザの上位ランクされていることには間違いはありません。
 

これはwindowsが低リテラシの人に使われいる以上、どうしようも無い事なのかもしれませんが、ブラウザの古くからある基本機能のalert関数も、ブラウザによってデザインや表示文言仕様は様々な状態になっています。
 

WEB開発において、UIデザインを重んじてきている昨今では、こうしたalert表示ではなく、独自のモーダル表示で行うようになってきている傾向があります。
 

今回はそんなモーダル機能を簡単に実現できるように、ライブラリを作ってみました。
(自分が仕事で使えるように作っただけですが・・・)
 

ソースコード

 

 

使い方

 

ボタンを押したタイミングや、リンククリックのタイミングで、上記のように”$$modal”をインスタンス化して、送り値としてオプションを設定すれば、モーダルダイアログが機能するようになります。
 

注意点としては、”button”設定は、1つだけでも、必ず配列にしてください。
 

サンプルプログラムを見るとわかるかもしれませんが、button設定に”click”という設定をすると、そのボタンを押した時に、任意のプログラムを実行することができるので、機能連動させることができます。
 

buttonの”mode”は、デフォルトでは「close」となっていて、押した後モーダルを閉じるようにしていますが、閉じない場合は”none”にしてください。
 

“bgClick”というのは、モーダルが表示されている時に背景が黒の半透明になっていますが、そこをクリックした場合にモーダルを閉じるかどうかのモード設定になっています。
 

デフォルトは”none”で、何もしないのですが、枠外クリックでモーダルを閉じたい場合は、”close”としてください。
 

あとは、記入できる文字列は全てinnerHTMLで表示されるので、タグ記述が可能になります。

サンプル

See the Pen
modal-js
by YugetaKoji (@geta1972)
on CodePen.


 

改善について

今回のモーダルは、レスポンシブを考慮していません。
 

cssファイルに画面サイズに応じたサイズや座標などを記述しなければいけません。
 

また、スクロール対応もしていないので、modalクラスをpositiopn:fixedにした方がいいかもしれませんね。
 

とりあえず、今の作業はPCブラウザのみだったので、このライブラリでver1.0にしておこうと思います。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です