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

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

関連記事

予約1

簡単にワードプレスで予約システムを作る

  シンプル予約システム MTS Simple Bookingを使う   WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …

seo対策

WordPressのSEO対策は簡単にプラグインで出来る

SEOとは、Search Engine Optimizationの略で、検索エンジン最適化のことです。 検索することによって表示される順位をより高い順位にすることを目的としています。 まず始めに、Go …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

記事一覧表示

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

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