wordpress

画像クリックで 違う画像やテキストの入った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
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

スマホで予約システム

スマホで予約システムが無料で作れる

  今流行りの予約システム   以前から、サロン系やフィットネス系のオンライン予約を頼まれたことがあり、何度か作成してきましたが、 今回は、コロナの影響からも言えると思いますが、 …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …