HTMLで、この画像のように画像をポップアップでタイトル付きで表示するようにする方法をおしえてほしいです。 https://toretama.jp/click-big-image-floaty.html これにタイトルをつける方法です。画像は http://www.lifecorp.jp/ の2024/01/08 17:00時点のものです。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
優里さん
・・・・画像をポップアップでタイトル付きで表示す・・・・・・
案1.タイトル付きの画像を用意する。
案2.このようなページを作る。↓
<!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>
No.3
- 回答日時:
画像のサイトはcolorboxを使用しているので、同じものを使うと良いと思います。
colorboxのURLです。サンプルも見れますので確認してください。
https://www.jacklmoore.com/colorbox/
No.2
- 回答日時:
こんばんは
>タイトル付きで表示するようにする方法をおしえてほしいです。
タイトルを拡大時のみに表示するのか、通常時も表示されているのかによって若干方法が変わると思います。
通常表示の内容をそのまま拡大表示する方が簡単ですね。
画像を拡大表示するスクリプト(ライブラリ)の代表的なものに、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 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HP作成 作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの 2 2022/02/02 12:22
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- その他(IT・Webサービス) MacとWindows Google検索した時のURL表示の違いについて 1 2022/11/17 10:38
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- モニター・ディスプレイ プラズマディスプレイ (PDP-507CMX-JP)に2in1PCの映像と音声を表示させたいです。 1 2023/08/18 12:04
- その他(プログラミング・Web制作) PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています 1 2023/12/04 17:10
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
Colorboxがうまく設置できません
JavaScript
-
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
-
4
PHPでのパスワード制限のセキュリティはどうなのか
PHP
-
5
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
6
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
7
HTTPエラーがカウントされる条件は?
SEO
-
8
CSSでつくったメニューのアニメーションがうまく動かない・変えたい
HTML・CSS
-
9
入力フォームの空白や改行を制限したい
PHP
-
10
HTMLで作った時報アプリが動きません
JavaScript
-
11
デジタルブックを自分のウェブサイトに設置する方法を教えて
オープンソース
-
12
SFTPなどは使わないホームページやプログラムファイルの公開方法
PHP
-
13
SQLの中上級者へのレベルアップ方法について
Oracle
-
14
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
15
プログラミング言語の制作方法について
C言語・C++・C#
-
16
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
17
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
JavaScript
-
18
401エラードキュメントを401.html?id=2の場合の表示にする方法
その他(プログラミング・Web制作)
-
19
httpのサイトにアクセスされたらhttpsのほうにリダイレクトするように設定する方法
サーバー
-
20
JavaScriptでページが更新されたときに./へ自動遷移するようにする方法を教えて
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Pythonでgif画像が上手く作れない
-
jqueryスライダーを2段でスライ...
-
EXCEL VBA 複数のImageコントロ...
-
【EXCEL VBA】ダブルクリックで...
-
画像をフーリエ変換するソース...
-
こんなことてしますか??
-
Excel ユーザーフォームで表示...
-
uwscについて質問です。
-
gif 画像上の ボタンに リン...
-
VBA シート毎に画像挿入
-
イメージマップでマウスオーバ...
-
uwcs のマクロで画像認識をして...
-
ヒストグラム類似度による画像...
-
Leafletで画像をon、offさせる...
-
Pythonのプログラム初心者の問題
-
UWSCの画像認識と条件分岐につ...
-
自作の地図をグーグルマップの...
-
EXCELに貼り付けた画像の位置を...
-
gif画像が壊れて読み込まない
-
画像のビット数を変更する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
こんなことてしますか??
-
【EXCEL VBA】ダブルクリックで...
-
Excelで画像URLを1つずつセル...
-
EXCEL VBA 複数のImageコントロ...
-
HTMLで画像をポップアップで表...
-
背景画像の繰り返しについて
-
Excel ユーザーフォームで表示...
-
gif 画像上の ボタンに リン...
-
VBA シート毎に画像挿入
-
jQuery . プログラミング 助け...
-
VBAのユーザーフォームのイメー...
-
jqueryスライダーを2段でスライ...
-
ホームページバナーを(画像が...
-
「using Windows」でエラーが出る
-
スマホでサイトの画像を長押し→...
-
【WPF】画像の切り替え
-
PowerPoint VBA で画像の鮮明度...
-
画像のピクセルデータの取得
-
UWSCの色判定
-
UWSCを使った画像認証マク...
おすすめ情報