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をテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …

ワードプレス

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

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

トグルメニュー

WordPressのメニューをおもしろくしてみた

    トグルメニュー(アコーディオンメニュー)の準備   WordPressのテーマに子テーマを作って、 そこで変更や追加をした方が安心安全なので以下の作業は子テーマを …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …