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

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

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

画面サイズ取得

ヘッダー以外の画面サイズ取得をやってみた

  ワードプレスを使っていて、最初に表示されるページのデザインで使えそう。 全画面表示にするために、ディスプレイのサイズ(高さ)を自動で取得して表示させる方法は試したことがありましたが、 今 …

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

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

Google Doc Embedder

WordPressでPDFを埋め込むプラグイン

  Google Doc Embedder   WordPressの記事内や固定ページ内で、PDFのファイルを利用したい、またはダウンロードできるようにしたい時に使うプラグインです …