wordpressプラグインに頼らず自作でポップアップを作ろう

サンプル

まず、サンプルをご覧ください。画像をクリックするとポップアップが開きます。[×]と画面外をクリックすると閉じます。
私が作成したラインスタンプたちです。良ければご購入お願いいたします(*^▽^*)。ラインの画像をクリックすると詳細が見れます。

振り向きねこちゃん

Creator Name: ふゆ

ラインスタンプ

寝そべりねこちゃん

Creator Name: ふゆ

ラインスタンプ

どすけべねこちゃん

Creator Name: ふゆ

ラインスタンプ

マリトッツォねこちゃん

Creator Name: ふゆ

ラインスタンプ

Creator Name: ふゆ
種族:猫振り向きねこちゃん

趣味

・パチンコ・スロット

パチンコ・スロットに人生を傾けるねこちゃん。振り向くのが大好き。

Creator Name: ふゆ
種族:猫寝そべりねこちゃん

趣味

・発明・居眠り

発明が得意なねこちゃん。居眠りが大好きで常に寝そべっている。

Creator Name: ふゆ
種族:猫どすけべねこちゃん

趣味

・スケベ

その名の通りどすけべなねこちゃん。商店街で飼われている看板ねこちゃん。

Creator Name: ふゆ
種族:猫マリトッツォねこちゃん

趣味

・食べられること

あのマリトッツォがねこちゃんになっちゃった。それ以上でもそれ以下でもない。

javascriptのコードです


document.addEventListener('DOMContentLoaded', function(){

    // 各クラスを取得
    let popup= document.querySelectorAll('.pop-up');
    let popOpen = document.querySelectorAll('.flex-img');
    let popClose = document.querySelectorAll('.pop-up-close');

    // 画像がクリックされた時
    popOpen.forEach( function( element , index ) {
        element.addEventListener('click', { name1: index, handleEvent: popupOpen} );
    });
    // バツ印がクリックされた時
    popClose.forEach( function( element , index ) {
        element.addEventListener('click', { name1: index, handleEvent: popupClose} );
    });
    // ポップアップの外側がクリックされた時
    popup.forEach( function( element ) {
        element.addEventListener('click', outsideClose);
    });
});

//----------------------------------------------------------
// 　ポップアップ表示処理
//----------------------------------------------------------
function popupOpen() {
    let popup= document.querySelectorAll('.pop-up');
    popup[this.name1].style.display = 'block';　// ブロック要素にして表示
    document.body.style.overflow = 'hidden';    // 画面をスクロールさせないようにする
    document.body.style.paddingRight = '17px';  // スクロールバー分だけ
}　

//----------------------------------------------------------
// 　ポップアップを閉じる処理(×)
//----------------------------------------------------------
function popupClose() {
    let popup= document.querySelectorAll('.pop-up');
    popup[this.name1].style.display = 'none';   // 非表示に

    document.body.style.overflow = 'auto';      // 画面をスクロールさせないようにするを解除
    document.body.style.paddingRight = '0px';   // スクロールバー分だけを戻す
}
//----------------------------------------------------------
// 　ポップアップを閉じる処理(枠外)
//----------------------------------------------------------
function outsideClose(e) {
    let popup= document.querySelectorAll('.pop-up');
    popup.forEach( function( element ){
        if (e.target == element ) {
            element.style.display = 'none';            // 非表示に
            document.body.style.overflow = 'auto';     // 画面をスクロールさせないようにするを解除
            document.body.style.paddingRight = '0px';  // スクロールバー分だけを戻す
        }
    });
}

CSSのコードです



.post_row {
    display: flex;
    justify-content: center;
}
.post_col2 {
    width: 50%;
}

.border {
    margin: 5px;
    width: 48% !important;
    border: 1px solid #000000;
}

.pop-up {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
    cursor: pointer;
}
.pop-up-content {
    position: fixed;
    background-color: #f4f4f4;
    width: 50%;
    animation-name: pop-up-open;
    animation-duration: 1s;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: default;
}

@keyframes pop-up-open {
    from {opacity: 0}
    to {opacity: 1}
}

.pop-up-header {
    background: #265a8a;
    color: #ffffff;
    padding: 3px 15px;
    line-height: 2.5rem;
    display: flex;
    justify-content: flex-end;
}

.pop-up-close {
    font-size: 2rem;
}

.pop-up-close:hover {
    cursor: pointer;
}

.pop-up-body {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: black;
}
.pop-up-body-left {
    margin: 10px;
    width: 100%;
    height: auto;
    max-width: 367px;
    min-width: 267px;
}
.pop-up-body-right {
    margin: 10px;
}

.pop-up-body-right span.pop-company {
    font-size: 1.3rem;
    font-family: serif;
}
.pop-up-body-right span.pop-name {
    font-family: serif;
}
.pop-up-body-right span.pop-name2 {
    font-family: serif;
    font-size: 1.4rem;
    font-weight: 900;
}
.pop-up-body-right div.pop-qualification {
    display: inline-block;
    border: 1px solid #000000;
    background-color: #265a8a;
    color: #ffffff;
    padding: 2px 20px;
    line-height: 1.5rem;
    font-family: serif;
    font-weight: 900;
    margin-bottom: 10px;
}
.pop-up-body-right div.pop-qualification-kinds {
    font-size: 0.88rem;
    line-height: 1.5rem;
    font-family: serif;
    font-weight: 900;
}
.pop-up-body-right div.pop-word {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #000000;
    font-size: 0.8rem;
}

HTMLのコードです



<div class="post_row">

<div class="post_col2 border">
<div class="flex-img">
<img src="【用意した画像を設定てください】" alt="" width="370" height="320" class="aligncenter size-full wp-image-923" />
</div>
<div class="name-content">
<p class="name">振り向きねこちゃん</p>
<div class="icon"><a href="https://store.line.me/stickershop/product/1351256/ja" target="”_blank”" rel="noopener"><img src="/wp-content/uploads/2023/10/line.png" alt="" width="512" height="512" class="aligncenter size-full wp-image-931" /></a></div>
</div>
<div class="director-content">
<p class="director">Creator Name: ふゆ</p>
<p class="director">ラインスタンプ</p>
</div>
</div>

<div class="post_col2 border">
<div class="flex-img">
<img src="【用意した画像を設定てください】" alt="" width="370" height="320" class="aligncenter size-full wp-image-935" />
</div>
<div class="name-content">
<p class="name">寝そべりねこちゃん</p>
<div class="icon"><a href="https://store.line.me/stickershop/product/1610353/ja" target="”_blank”" rel="noopener"><img src="/wp-content/uploads/2023/10/line.png" alt="" width="512" height="512" class="aligncenter size-full wp-image-931" /></a></div>
</div>
<div class="director-content">
<p class="director">Creator Name: ふゆ</p>
<p class="director">ラインスタンプ</p>
</div>
</div>

</div>

<!-- ポップアップ 一人目 -->
<div class="pop-up">
<div class="pop-up-content">
<div class="pop-up-header"><span class="pop-up-close">×</span></div>
<div class="pop-up-body">
<div class="pop-up-body-left">
<img src="【用意した画像を設定てください】" alt="" width="370" height="320" class="aligncenter size-full wp-image-923" />
</div>
<div class="pop-up-body-right">
<p>
<span class="pop-company">Creator Name: ふゆ</span><br />
<span class="pop-name">種族:猫 <span class="pop-name2">振り向きねこちゃん</span></span></p>
<div class="pop-qualification">趣味</div>
<div class="pop-qualification-kinds"><span>・パチンコ・スロット</span></div>
<div class="pop-word">
パチンコ・スロットに人生を傾けるねこちゃん。振り向くのが大好き。
</div>
</p>
</div>
</div>
</div>
</div>

<!-- ポップアップ 二人目 -->
<div class="pop-up">
<div class="pop-up-content">
<div class="pop-up-header"><span class="pop-up-close">×</span></div>
<div class="pop-up-body">
<div class="pop-up-body-left">
<img src="【用意した画像を設定てください】" alt="" width="370" height="320" class="aligncenter size-full wp-image-935" />
</div>
<div class="pop-up-body-right">
<p>
<span class="pop-company">Creator Name: ふゆ</span><br />
<span class="pop-name">種族:猫 <span class="pop-name2">寝そべりねこちゃん</span></span></p>
<div class="pop-qualification">趣味</div>
<div class="pop-qualification-kinds"><span>・発明・居眠り</span></div>
<div class="pop-word">
発明が得意なねこちゃん。居眠りが大好きで常に寝そべっている。
</div>
</p>
</div>
</div>
</div>
</div>

以上でポップアップが表示されるはずです。CSSの体裁やクラス名は任意で変えてください