【jQuery】jQueryでモーダルウィンドウを作る

jQueryでモーダルウィンドウを作る方法を勉強したので、記録しておきます。
#1 準備
HTMLを準備。a要素に"modal"クラスを付けておきます。

```html
        <ul>
            <li><a href="images/img1.png" class="modal">
                <img src="images/img1.png"></a></li>
            <li><a href="images/img2.png" class="modal">
                <img src="images/img2.png"></a></li>
        </ul>
```
結果。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/d50317a4-b844-164d-d4fe-d5f7233990ad.png" width=30%>
ここから、画像をクリックすると、その画像が前面に表示されるようにしていきます。
※この画像は適当にフリー素材を使っているだけで、特に意味はありません。
#2 JavaScriptの記述
モーダルウィンドウを実装するために、2つの要素を追加します。
1つ目は、前面に表示される画像。
2つ目は、画像が前面に表示されているときに、背景をグレーにするための要素です。
これらは初期表示せず、まずjQueryで要素を追加します。
また、グレーの背景をクリックすると画像の前面表示がキャンセルされる(モーダルウィンドウを閉じる)機能、画像をクリックすると上記2要素が表示される(モーダルウィンドウを表示する)機能を作ります。

 ```javascript
$(function(){
    $("body").append("<div id='background'></div><div id='mainImage'></div>");
    $("#background").click(function(){
        //モーダルウィンドウを閉じる
        $(this).hide();
        $("#mainImage").hide();
    });
    $("a.modal").click(function(){
        //モーダルウィンドウを開く
        $("#background").show();
        $("#mainImage").show();
        return false;
    });
});
```
`$("body").append`により、要素を追加します。
追加するのは、グレーの背景`<div id='background'></div>`と画像`<div id='mainImage'></div>`の2つ。今の所中身はありません。
ウィンドウの開閉は、`hide()`と`show()`で要素を表示・非表示することで実装します。
#3 CSSの記述
jQueryで追加した2要素について、中身を作るためCSSを記述します。

```css
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
}
#mainImage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -256px;
    margin-left: -220px;
}
```
* `html, body`

グレー背景を画面いっぱいに表示するため、まずhtml、body要素について、`height: 100%;`とします。

* `#background`

その上で、グレー背景の要素`#background`について、`height: 100%;`、`width: 100%;`とします。これでブラウザのウィンドウいっぱいに要素が表示されます。
`background-color: black;`、`opacity: 0.5;`により、背景を黒にして透過させます。これがグレーの背景になります。

* `#mainImage`

`top: 50%;`、`left: 50%;`により、ウィンドウの中心点を画像を表示する基準(画像の左上の点)にします。
さらに`margin`に、画像の半分のサイズのマイナス値を指定することで、画像をサイズの半分だけ左上にずらすような効果が得られ、結果として画像が画面中央に表示されます。

最後に、`#background`と`#mainImage`はどちらも初期表示しないため、`display: none;`としておきます。

結果。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/0507747e-8c86-5553-a065-b1a715fa7b4b.png" width=60%>
画像をクリックするとグレーの背景が現れるところまでできました。
#4 JavaScriptの記述、もう一度
あとは、グレーの背景とともにクリックした画像を表示できれば完成です。
現時点では、`#mainImage`のdiv要素は表示されているのですが、中身がない状態です。したがって、これを、クリックした画像を表示するimg要素に書き換える必要があります。
`$("#mainImage").show();`の部分に追記していきます。

```javascript
$("#mainImage").show().html("<img src='クリックした画像のパス'>");
```
これでimg要素に書き換えることができました。
次に、クリックした画像のパスをsrc属性に設定していきます。
これは、クリックしたa要素のhref属性から取得できます。クリックした要素は`this`で指定し、`href`を取得しましょう。

```javascript
$("#mainImage").show().html("<img src='" + $(this).attr("href") + "'>");
```
ダブルクォーテーションとシングルクォーテーションが混ざって見にくいので注意。
全体はこんな感じになりました。

```javascript
$(function(){
    $("body").append("<div id='background'></div><div id='mainImage'></div>");
    $("#background").click(function(){
        //モーダルウィンドウを閉じる
        $(this).hide();
        $("#mainImage").hide();
    });
    $("a.modal").click(function(){
        //モーダルウィンドウを開く
        $("#background").show();
        //表示した上で、img要素に書き換える
        $("#mainImage").show().html("<img src='" + $(this).attr("href") + "'>");
        return false;
    });
});
```
結果。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912003/e84aaee0-acf3-e693-b810-2f1b812e57fc.png" width=80%>
画像をモーダルウィンドウ的に表示することができました！