##はじめに
ここでは、めちゃ便利なModaalのたくさんのカスタマイズを丁寧に解説していきます。
ちなみにModaalの導入についてはこちらの記事をご覧ください。
【丁寧な解説書】jsプラグインModaal 〜導入編〜
公式のサイトはこちら
##カスタマイズそもそも
まず、カスタマイズってそもそもどこを変えたらいいのっていう方のために、初歩的なお話をするのでそんなの余裕だよ！って方は次に進んでください。
まずは例をどんっ！
$('.my-link').modaal({
type: 'inline',
background: '#fff'
});
-
.mi_linkはHTML内のクラス名に対応しています。自分の使う形に適当に変えてくださいね。 -
$('.my_link').modaal();これが基本形です。 - カスタマイズを追加の時はmodaalの括弧内に追加していきます。
-
typeやloading_contentはkeyと呼ばれるもので、cssでプロパティみたいなものです。 -
ajaxやLoading content‥はvalueと呼ばれるもので、ここを変更して自分好みにカスタマイズします。
忘れがちポイント
- valueの
'(シングルクウォーテーションマーク) - 複数カスタマイズするときの
,(カンマ)
#本題のカスタマイズオプション解説
###頻出度高め
まずは頻出度の高いものの説明を載せます！だいたいの人はここだけ見ればやりたいこと出来るはず！
####1. type
モーダルでぽんっと何を出すかによって設定が必要。
デフォルトはinline、型はstring型。
| カスタマイズ | 解説メモ |
|---|---|
| inline | inline要素を表示させたい inline要素の解説はこちら |
| image | 画像を表示させたい |
| iframe | 別のHTMLファイルを表示させたい（Youtubeの埋め込みなど） |
| confirm | 確認ダイアログなどの表示 |
| video | 動画を表示させたい |
| instagramを表示させたい |
####2. background
モーダルがぽんって出てきたときのモーダル部分の裏のを覆っている色。
デフォルトは#000、型はstring型。
ちょぴっとメモ
ここでrgba指定をすると背景の透過度も一気に指定できて便利！
ちなみにカラーコードのrgb変換はこちらのサイトをお使いください
RGBと16進数カラーコードの相互変換ツール
####3. animation_speed
モーダルでぽんっと出すのにかかる時間。
デフォルトは300（0.3秒）、型はinteger型。
ちょぴっとメモ
githubにはafter_callback_delayも一緒に変えなきゃいけないよって書いてあるけれど、animation_speedの変更だけで大丈夫そうです。
もし、その注意書きの意味わかる方いらっしゃいましたらご指摘いただきたいです、！
####4. background_scroll
背景をスクロールさせるか否か
デフォルトはfalse、型はboolean型。
これをtrueに設定すると、モーダルの後ろをスクロール出来る。
####5. width
モーダルの希望の幅を指定。
デフォルトはnull、型はinteger型。
####6. height
モーダルの希望の高さを指定。
デフォルトはnull、型はinteger型。
###頻出度低め
ここはこのカスタマイズってどんな時に使うのーっていう人のために頻出度低めなものにちょっとだけ触れてます。
####1. hide_close
モーダルの閉じるボタンを表示するかを指定。
デフォルトはfalse、型はboolean型。
| カスタマイズ | 解説メモ |
|---|---|
| false | 閉じるボタンを表示 |
| true | 閉じるボタンを非表示 |
どんな時に使うの？
modaal.jsは便利なプラグインだから、閉じるボタンを用意してくれているけれど、自分でカスタマイズしたボタンを使いたいよ！っていう場合はvalueをtrueにしてね
####2. overlay_opacity
背景オーバーレイの透過度を指定。
デフォルトは0.8、型はfloat型。
ちょぴっとメモ
先述の通り、backgroundでも透過度は指定できます。
####3. fullscreen
モーダルが画面全体に表示されるようにする。
デフォルトはfalse、型はboolean型。
正直な話
youtubeのモーダルではサイズに変化がありませんでした、ので、ちょっと使い方が正直わかりませんでした、
####4. start_open
サイト読み込み時にモーダルが表示されるようにする。
デフォルトはfalse、型はboolean型。
####5. overlay_close
閉じるボタンだけでなく、モーダルの背景を押したらモーダルが閉じるようにしたり、しなかったり。
デフォルトはtrue、型はboolean型。
###confirmのカスタマイズ
先述のtypeをconfirmにすると、ダイアログを作ることができます。
変更することが出来る部分
| キー（key） | デフォルト |
|---|---|
| confirm_button_text | Confirm |
| confirm_cancel_button_text | Cancel |
| confirm_title | Confirm Title |
| confirm_content | This is the default confirm dialog ‥‥ |
##終わりに
たくさん細かく丁寧に解説したつもりですが、わからないことがあればぜひ教えていただきたいなと思います。また、私の知識不足によりtypeをajaxに指定したときのことは省いています。また頑張って勉強してから追加できたらしますー！
というわけで、ご覧いただきありがとうございましたー！