jQueryでモーダルウィンドウ画像表示 - 情弱エンジニアのなかのblog

画像をクリックして背景を暗くしてクリックした画像をモーダルウィンドウで表示するという処理をjQueryで制作したので手順などを記載いたします。

まずはHTMLで画像の準備をします。

1.HTML

<body>
    <a href="images/temp.jpg" class="modal">
    <img src="images/temp.jpg" alt="画像"></a>
    <div id="glayLayer"></div>
    <div id="overLayer"><img src="images/article.jpg"></div>
</body>

画像が一枚表示されます。

画像を表示した後に[glayLayer]と[overLayer]というものを用意します。

[glayLayer]は半透明レイヤーをブラウザに表示します。

[overLayer]はクリックした画像を表示します

2.CSS

CSSの設定を記載いたします

#glayLayer{
    /*デフォルトだと表示しないようにする*/
    display:none;
    position:fixed;
    top:0;
    left:0;
    /*画面全体に表示する*/
    height:100%;
    width:100%;
    /*色設定 グレーに指定*/
    background:black;
    opacity: 0.60;
}

#overLayer {
    /*デフォルトだと表示しない*/
    display: none;
    position:fixed;
    /*画像の表示位置*/
    top: 30%;
    left: 30%;
}

3.jQuery

画像をクリックしてモーダルウィンドウが表示されるようにいたします。

//glayLayerがクリックされたら
$("#glayLayer").click(function(){
    //glayLayerを消す
    $(this).hide();
    //overLayerを消す
    $("#overLayer").hide();
});

//画像がクリックされたら
$("a.modal").click(function(){
    //glayLayerを表示する
    $("#glayLayer").show();
    //クリックされた画像をoverLayerで表示させる
    $("#overLayer").show();
    //clickイベントを実行した後にリンク先に移動してしまうのを防ぐ
    return false;
});

完成したらこんな風になります。

f:id:nonaka-katuma-hal:20171005180002j:plain

以上になります。