Webサイト制作

投稿日:2024年4月3日 更新日:

画像の拡大表示(ポップアップ)

やりたいこと

画像のポップアップがしたい!

タグを設置

html内であればどこでも良いので、ポップアップしたいページに以下のタグを追加する

<div id="modal-container">
    <div><img src=""></div>
</div>

画像にクラスを付与

上のタグとは別に、ポップアップしたい画像にクラスを追加する。
クラス名は任意のものを。

<img src="画像のパス" class="popup">

スクリプトを記載

jQueryを使用します。
以下のコードをページに追加します。

const modal = jQuery('#modal-container');
const img = modal.find('img');
jQuery('img.popup').each(function(index) {
jQuery(this).click(function() {
img.attr('src', jQuery(this).attr('src'));
modal.show();
})
});
modal.click(function() {
$(this).hide();
});

スタイルを記載

スタイルシートに以下コードを追記します。

#modal-container {
display: none;
position: fixed;
background: rgba(0, 0, 0, .6);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
}
#modal-container>div {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#modal-container>div img {
max-width: calc(100vw - 30px);
max-height: calc(100vh - 30px);
}
img.popup {
cursor: pointer;
}

完成!

- Webサイト制作
-

関連記事

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenuあまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。オプションで色々設定もできるみたいなので、初 ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...