HTMLで画像をポップアップで表示するようにする方法

締切済

質問者：優里さん
質問日時：2024/01/08 18:52
回答数：4件

HTMLで、この画像のように画像をポップアップでタイトル付きで表示するようにする方法をおしえてほしいです。　https://toretama.jp/click-big-image-floaty.html　これにタイトルをつける方法です。画像は　http://www.lifecorp.jp/　の2024/01/08 17:00時点のものです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

参考程度に

No.4

回答者： gura_
回答日時：2024/01/09 21:16

優里さん

　････画像をポップアップでタイトル付きで表示す･･････

案１．タイトル付きの画像を用意する。

案２．このようなページを作る。↓

<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0;}
.btn {
position: absolute;top: 12px; left: 12px; width: 60px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: .3s;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
max-width: 600px; height: 500px;
width: 90%;
background: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: .3s;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal .close {
position: absolute;
top:-8px;
right: 10px;
font-size: 70px; color: #0aa;
}
.modal h2 { height: 100px;
text-align: center;
font-size: 68px;
}
.modal img{
width: 100%; height: 400px;
}
</style>

</head>
<body>
<span class="btn">push
<img src="https://oshiete.xgoo.jp/images/v2/common/profile …
</span>
<div class="overlay"></div>

<div class="modal">
<div class="close"> 🗙</div>
<h2>タイトル</h2>
<p><img src="https://oshiete.xgoo.jp/images/v2/common/profile …
</div>

<script>
const btn = document.querySelector('.btn');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close');
const overlay = document.querySelector('.overlay');
btn.addEventListener('click', function(e){
e.preventDefault();
modal.classList.add('active');
overlay.classList.add('active');
});
closeBtn.addEventListener('click', function(){
modal.classList.remove('active');
overlay.classList.remove('active');
});
</script>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： kaz33
回答日時：2024/01/09 11:04

画像のサイトはcolorboxを使用しているので、同じものを使うと良いと思います。

colorboxのURLです。サンプルも見れますので確認してください。
https://www.jacklmoore.com/colorbox/

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2024/01/08 21:20

こんばんは

＞タイトル付きで表示するようにする方法をおしえてほしいです。
タイトルを拡大時のみに表示するのか、通常時も表示されているのかによって若干方法が変わると思います。
通常表示の内容をそのまま拡大表示する方が簡単ですね。

画像を拡大表示するスクリプト（ライブラリ）の代表的なものに、lightboxがあります。
同様のライブラリは数多くありますので、検索してお気に召すものをご利用になるのが簡単でしょう。
（lightbox をキーに検索してゆけば、いろいろ見つかると思います）

画像だけでなくdiv等の要素を拡大できるものもありますので、そのようなものであれば、文字や画像も自由にレイアウト可能です。
以下は、そのようなものの一例です。
https://www.jacklmoore.com/colorbox/

一方で、CSS3を利用することでスクリプトを用いなくても、同様の効果を実現することが可能です。
そのようなものを利用なさる選択肢もあるでしょう。
https://blog.verygoodtown.com/2010/12/css3-light …
https://www.rectus.co.jp/archives/4397

拡大時のみにタイトルを表示するなどのように内容も変えるのであれば、拡大時のクラスなど（＝セレクタ）を利用して、タイトル部分を表示/非表示するような仕組みしておけば、内容を変えることも可能でしょう。

効果や動作がお気に召さなければ、原理さえわかっていれば、お好みのものを自作してもさほど難しいものではありません。
例えば、表示をそのままを拡大するのであれば、CSSの transform: scale を利用するのが簡単だと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/tr …