【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法

javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について，いろいろ調べていたが，うまく見つからなかったので考えて作ってみた．(当然だが HTML は使っている．)

モーダルダイアログというとそのダイアログウィンドウ以外は触れなくて，モードレスダイアログだと自由に触れる．
今回のはスクロールは出来るがウィンドウ以外を触ると閉じるという写真や画像などを表示する時によく使われるポップアップするレイヤーのようなものを作りたい．

CSS だけでも作れるだろうと考えてみたら，作れたので方法を説明する．

表示したポップアップウィンドウを閉じるときに × 印を押して閉じるのはチェックボックスを使って出来る．
しかし，今回そのウィンドウの外を押しても閉じるように作ってみた．
ウィンドウの中を触っても閉じない．

CSS のみで画像などをポップアップ風に拡大表示する方法

javascript だと lightbox という有名なライブラリがあったり， ライブラリを使わなくても自分でプログラムを書いて実現することもできる．
jQuery を使う方法も検索するといろいろ出てくる．

このページで使っている方法は javascript も jQuery も使わない．
HTML と CSS のみなのでお手軽だ．
以下のポップアップウィンドウのイラストをクリックしてみてほしい．

レイヤー表示

×

ちょっと渋い感じのデザインにしてみたバージョン．

横浜赤レンガ倉庫のクリスマスツリー

×

サンプルコード

二つある画像のうち，下の画像を表示しているコードは以下のようになる．

CSS のサンプルコード

<style type="text/css" media="screen">
.c {
    text-align: center;
}
.overlay { /* グレーの背景 */
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.5s 0s ease;
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#pop-up {
  display: none;
}
#pop-up:checked + .overlay {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
  background-color: #000000D0;
  width: 100%;
}
.popWindow {
  border-radius: 5px;
  overflow: auto; /* スクロールバー用 */
  max-height: 95%; /* すき間 */
  min-width: fit-content; /* 横幅が広い時に白の部分が大きくならないため */
  max-width: 95%; /* すき間 */
  position: fixed;
  top: 50%; /* 中央に */
  left: 50%; /* 中央に */
  transform: translate(-50%, -50%); /* 中央に */
  z-index: 100010;
  font-size: 13px;
  line-height: 18px;
  margin: 10px auto;
  padding: 4px 10px;
  background: #FFFD; /* 枠の色 */
  text-align: center; /* 文字を中央寄せ */
  transition: all 500ms ease-in-out;
}
.popWindow .ptitle {
  font-size: 15px;
  margin: 8px;
  color: #333;
}
.popWindow .close {
  position: absolute;
  top: 8px;
  right: 10px;
  transition: all 300ms;
  font-size: 24px;
  line-height: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  padding: 2px;
}
.popWindow .close:hover {
  color: #06D85F;
}
.popWindow::-webkit-scrollbar-track {
  background: none;
}
.popWindow::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.popWindow::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}
.clickable:hover {
  cursor: pointer;
}
@media screen and (max-width: 700px){
  #pop-up:checked + .overlay {
    visibility: hidden;
    opacity: 0;
  }
}
</style>

HTML のサンプルコード

<input type="checkbox" id="pop-up">
<label id="popup" for="pop-up" class="overlay">
  <label class="popWindow">
    <div class="ptitle"><a href="https://www.yokohama-akarenga.jp/" rel="noopener" target="_blank">横浜赤レンガ倉庫</a>のクリスマスツリー</div><label class="close" for="pop-up">&times;</label><img itemprop="image" loading="lazy" src="/wp/wp-content/uploads/2021/12/akarenga_tree_large.jpg" alt="横浜赤レンガ倉庫のクリスマスツリー" width="720" height="1080" /></div>
  </label>
</label>
<div class="c">
  <label for="pop-up">
    <img itemprop="image" loading="lazy" src="/wp/wp-content/uploads/2021/12/akarenga_tree.jpg" alt="" width="427" height="640"  />
  </label>
</div>

ソースの解説

hidden にしたチェックボックスを元のページの画像に for で適用して，:checked を使って新たにウィンドウを開けるようにする．

新たに開いたウィンドウでは「×」をチェックボックスにするだけだと「×」を押した時にしか閉じられないので，下のページ全てを覆うレイヤーにもチェックボックスを適用する．

しかし，全体に適用してしまうとウィンドウの中を押した時も閉じてしまうようになるので，それを避けるために label をもう一つ間に挟んでいる．(class="popWindow" の label)
ここがミソとなる．