1.ファイルのダウンロード

Modaalのページ にアクセスして、DOWNLOAD FROM GITHUBボタンを押下。（Githubのページに遷移します。） 緑色のCodeボタンを押下して、Download ZIPを押下すると、ファイルをダウンロードできます。

2.必要なファイルを任意のフォルダに入れる

ダウンロードしたファイルは以下のような内容になっています。 実際に必要なファイルは distフォルダのjsフォルダ、CSSフォルダに入っているに入っている

• modaal.min.js
• modaal.min.css

を利用します。 各ファイルは自分の制作中のファイルを設置しているフォルダの中に「css」「js」フォルダを作って移動（コピー）させます。

3-1.必要なコードを追加する（CSS設置編）

CSSを追記します。

    <title>モーダルウィンドウを作ろう</title>
    <link rel="stylesheet" href="css/modaal.min.css">
    <link rel="stylesheet" href="css/style.css">

書くときのポイント

タイトルタグの下に「modaal.min.css」を書いてから、自分が作成しているCSSファイルを設定しましょう！

3-2.ふわっとしたい内容を追加します（HTML設置編）

ふわっと表示したいところをHTMLでを設定します。 クリックするボタン

<a href="#inline" class="inline">ここを押すとふわっと表示できるよ</a>

<div id="inline">
<p>この箱（div）入れた内容がふわっと表示されるよ</p>
</div>

書くときのポイント

1.ボタンには「href=”#inline”」のようにふわっと表示したい箱に「id名（あたまに＃をつけてid名前をつける）」こと

2.「id=”inline”」は必ずふわっと出したいボタンと同じ名前をつけること。

3.「id=”inline”」はふわっと出したい箱（div）には、CSSで非表示（display: none;）にすること
※HTMLタグに「style=”display:none;”」と書いても非表示にできます。

3-3.必要なコードを追加する（javacsript設置編）

javacsriptファイルを設定します。 ファイルの設定はからのあいだに設定します。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/modaal.min.js"></script><script>
        $(function(){
            $(".inline").modaal();
        });
    </script>

書くときのポイント

・必ず一番下のとに書きましょう！
・$(“.inline”)は、ふわっと出すために設置したボタンと同じクラス名にしましょう
・複数の「jquery」は設定してはいけませんよ！

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/modaal.min.js"></script><script>
        $(function(){
            $(".inline").modaal();
            $('.image').modaal({
                type: 'image'
            });
        });
    </script>

4-1.画像クリックして、画像をふわっと出したいとき（HTML設置編）

ふわっと表示したいところをHTMLでを設定します。

<a href="path/to/image-1.jpg" data-group="gallery" class="gallery">Show</a>
<a href="path/to/image-2.jpg" data-group="gallery" class="gallery">Show</a>
<a href="path/to/image-3.jpg" data-group="gallery" class="gallery">Show</a>

ポイント：ふわっと出したいグループには「data-group=”gallery”」の「gallery」って書いている部分の名前を同じにしましょう！

4-2.必要なコードを追加する（javacsript設置編）

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/modaal.min.js"></script><script>
        $(function(){
            $('.gallery').modaal({
                type: 'image'
            });
        });
    </script>

書くときのポイント

・必ず一番下のとの間に書きましょう！
・$(“.inline”)は、ふわっと出すために設置したボタンと同じクラス名にしましょう
・複数の「jquery」は設定してはいけませんよ！