小さな画像をクリックしたときに更新せずに大きな画像コードが表示されるようにLightboxを実現するためにCSSを使用する

コード紹介:

CSS の「Lightbox」は、小さな画像をクリックすると更新せずに大きな画像を表示できる人気の画像表示技術です。 Discuz フォーラムにもこの機能はありますが、こちらも JS を使っているようです。こちらは JS を使わず、完全に純粋な CSS で実装されています。これも使い勝手が非常に良いです。画像の境界線とサイズは、Web ページのレイアウトに合わせて設定する必要があります。これは単なるデモンストレーションであり、Web ページにぴったり合うとは限りません。

コードの内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<ヘッド>
<title>CSS を使用して Lightbox を防ぎ、小さな画像をクリックしても更新せずに大きな画像を表示するコードを実現する - www.webdm.cn</title> 
<スタイル> 
.black_overlay{ 
表示: なし; 
位置: 絶対; 
トップ: 0%; 
残り: 0%; 
幅: 100%; 
高さ: 100%; 
背景色: 白; 
zインデックス:1001; 
-moz-不透明度: 0.8; 
不透明度:.80; 
フィルター: アルファ(不透明度=80); 
} 
 .white_content { 
表示: なし; 
 位置: 絶対; 
上位: 25% 
左: 25%; 
幅: 46%; 
高さ: 50%; 
パディング: 13px; 
境界線: 16px 実線オレンジ; 
背景色: 白; 
zインデックス:1002; 
オーバーフロー:自動; 
} 
 .codefans_net
{    
幅:420ピクセル;
高さ:210px;
背景色:#efefef;
色:#666;
境界線の幅:1px;
境界線の色:#999;
境界線スタイル:solid;
マージン:6px;
パディング:6px;
フォントサイズ:14px;
行の高さ:200%;
float:ミッドデン;
    
}
</スタイル> 
</head> 
<本文> 
<p class="codefans_net">CSS の「Lightbox」は、小さな画像をクリックすると更新せずに大きな画像を表示する機能を実現できる人気の画像表示技術です。この効果がよくわからない方は、下の画像をクリックするとわかります！ <br>
<a href = "javascript:void(0)" onclick = "document.getElementById

('light').style.display='block';document.getElementById('fade').style.display='block'"><img border="0" 

src="upload/2022/web/demoimgsmall.jpg" 幅="100" 高さ="62"></a> 
<div id="light" class="white_content">
<a target="_blank" href="/">
<img border="0" src="upload/2022/web/demoimg.jpg" width="350" height="216"></a> <a href = 

"javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'">閉じる</a></div> 
<div id="fade" class="black_overlay"></div></p>
</本文> 
</html>
<br />
<p><a href="http://www.webdm.cn">Web Code Station</a> - 最もプロフェッショナルな Web コードのダウンロード!

</p>

要約する

上記は、CSS アンチライトボックスを使用して、小さい画像をクリックしても更新せずに大きい画像を表示するコードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: アリババの中秋節ロゴとウェブサイトのデザインプロセス

>>: Spring Boot Docker パッケージングツールの概要