モーダルで画像の拡大表示

#デイトラWeb制作コース中級編DAY6の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習31日目⏩<br><br>Web制作コース中級編DAY6💻<br><br>学習時間:1時間23分⏳<br><br>学習内容:jQuery実践課題②✏<br><br>学び📚<br>・モーダルで画像の拡大表示<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/Pz5v9TVsoW">pic.twitter.com/Pz5v9TVsoW</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1381808630174003203?ref_src=twsrc%5Etfw">April 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#　【制作物】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【成果報告 PART7】<br><br>モーダルで画像の拡大表示を実装しました💻<a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a> <a href="https://t.co/0qId9rOmXF">pic.twitter.com/0qId9rOmXF</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1381810367450415105?ref_src=twsrc%5Etfw">April 13, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#　【学び】

【HTML】

```index.html
<main class="course-wrapper">
        <div class="course-item">
            <img src="./img/web_first.png" alt="デイトラ初級コース">
                <p>HTML / CSS / Bootstrap</p>
        </div>
        <div class="course-item">
            <img src="./img/web_second.png" alt="デイトラ中級コース">
                <p>HTML / CSS / JavaScript / jQuery</p>
        </div>
        <div class="course-item">
            <img src="./img/web_third.png" alt="デイトラ上級コース">
                <p>PHP / WordPress</p>                    
        </div>
</main>
　　　　 <div id="graydisplay"></div>

```


【CSS】

```style.css

#graydisplay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%!important;
    height: 100%;
    background: rgba(0,0,0,0.45);
}
#graydisplay img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 60%;
    max-height: 60%;
    height: 60%;
}

```

【JavaScript】

```maiin.js

$(function () {
    $("main img").click(function () {
        $("#graydisplay").html($(this).prop('outerHTML'));
        $("#graydisplay").fadeIn(200);
    });
    $("#graydisplay, #graydisplay img").click(function () {
        $("#graydisplay").fadeOut(200);
    });
});

```