はじめに

ここでは、めちゃ便利なModaalのたくさんのカスタマイズを丁寧に解説していきます。

公式のサイトはこちら
* 公式サイト
* github

カスタマイズそもそも

まず、カスタマイズってそもそもどこを変えたらいいのっていう方のために、初歩的なお話をするのでそんなの余裕だよ！って方は次に進んでください。

まずは例をどんっ！

$('.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型。

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型。

どんな時に使うの？
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にすると、ダイアログを作ることができます。

変更することが出来る部分

終わりに

たくさん細かく丁寧に解説したつもりですが、わからないことがあればぜひ教えていただきたいなと思います。また、私の知識不足によりtypeをajaxに指定したときのことは省いています。また頑張って勉強してから追加できたらしますー！
というわけで、ご覧いただきありがとうございましたー！