画像クリックで 違う画像やテキストの入ったBOXを表示させる
投稿日:
プラグインなしで、別の画像やテキストをlightboxのように表示させる
html
<a class="item-demo"> <img src="/◯◯◯.jpg" alt="△△△" /> <div class="item-text">テキストを入れるなら</div> </a> <div class="popup-demo"> <div class="popup-content content-demo"> <p class="ofitem">何か文字を入れるなら</p> <i class="close far fa-times-circle"></i> </div><!-- /popup-content --> </div><!-- /popup-demo -->
aタグの範囲は、通常見えて居る部分です。
クラス名popip-demoの範囲は、隠しておいて、クリックされると表示されるようにします。
css
.item-demo{ cursor:pointer; } .popup-demo { display: none; height: 100vh; width: 100%; background:rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; z-index:100; } .popup-content{ padding: 2rem; width: 90vw; height:80vh; overflow-y:auto; position:relative; } .content-demo{ background:url("/◇◇◇.jpg") center / cover no-repeat; } .popup-show { display: flex; justify-content: center; align-items: center; } i.close{ font-size:4rem; cursor:pointer; position:absolute; top:2%; right:2%; color:#fff; } @media screen and (min-width: 769px) { .popup-content{ width: 65%; max-width:60rem; height:90vh; } }
cssに関したは、お好みで変えてもOKです。
i.closeの部分は、Font Awesomeを使っています。
js
$(function() { $('.item-demo').on('click',function(){ $('.popup-demo').addClass('popup-show').fadeIn(); }); $('.close').on('click',function(){ $('.popup-demo').fadeOut(); }); });
See the Pen
GRZMNKr by show-be (@show-be)
on CodePen.
関連記事
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②
4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …
- PREV
- レスポンシブの確認
- NEXT
- Google FontsがEdgeで表示されない場合