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

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

【この記事に書いてあること】

プログラミング学習31日目⏩

Web制作コース中級編DAY6💻

学習時間:1時間23分⏳

学習内容:jQuery実践課題②✏

学び📚
・モーダルで画像の拡大表示#デイトラ#プログラミング初心者#プログラミング学習 pic.twitter.com/Pz5v9TVsoW

— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 13, 2021

　【制作物】

【成果報告 PART7】

モーダルで画像の拡大表示を実装しました💻#プログラミング初心者#プログラミング学習#駆け出しエンジニアとつながりたい pic.twitter.com/0qId9rOmXF

— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 13, 2021

　【学び】

【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);
    });
});