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

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

関連記事

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …

ワードプレス

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

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …

ワードプレス

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

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

画像の下に隙間

背景画像の下に隙間ができる【WordPress】

HOME PAGE1 PAGE2 PAGE3     何が原因なのか?   HTMLでは、下記の様にしています。 <div class="haikei&q …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …