自作でホップアップ処理を作る

2025年1月11日

サンプル

まず、サンプルをご覧ください。画像をクリックするとポップアップが開きます。[×]と画面外をクリックすると閉じます。
私が作成したラインスタンプたちです。現在販売を中止しております。ラインの画像をクリックするとサイトには飛びます

振り向きねこちゃん

Creator Name: ふゆ

ラインスタンプ

寝そべりねこちゃん

Creator Name: ふゆ

ラインスタンプ

どすけべねこちゃん

Creator Name: ふゆ

ラインスタンプ

マリトッツォねこちゃん

Creator Name: ふゆ

ラインスタンプ

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

趣味

・パチンコ・スロット

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

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

趣味

・発明・居眠り

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

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

趣味

・スケベ

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

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

趣味

・食べられること

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

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';  // スクロールバー分だけを戻す
        }
    });
}

<div class="post_row">

<div class="post_col2 border">
<div class="flex-img">
<img src="/wp-content/uploads/2024/12/01.png" alt="振り向きねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-142" />
</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/2024/12/line.png" alt="LINEアイコン" width="512" height="512" class="aligncenter size-full wp-image-148" /></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="/wp-content/uploads/2024/12/04.png" alt="寝そべりねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-143" />
</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/2024/12/line.png" alt="LINEアイコン" width="512" height="512" class="aligncenter size-full wp-image-148" /></a></div>
</div>
<div class="director-content">
<p class="director">Creator Name: ふゆ</p>
<p class="director">ラインスタンプ</p>
</div>
</div>

</div>



<div class="post_row">

<div class="post_col2 border">
<div class="flex-img">
<img src="/wp-content/uploads/2024/12/01-1.png" alt="どすけべねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-144" />
</div>
<div class="name-content">
<p class="name">どすけべねこちゃん</p>
<div class="icon"><a href="https://store.line.me/stickershop/product/17056293/ja" target="”_blank”" rel="noopener"><img src="/wp-content/uploads/2024/12/line.png" alt="LINEアイコン" width="512" height="512" class="aligncenter size-full wp-image-148" /></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="/wp-content/uploads/2024/12/07.png" alt="マリトッツォねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-145" />
</div>
<div class="name-content">
<p class="name">マリトッツォねこちゃん</p>
<div class="icon"><a href="https://store.line.me/stickershop/product/17081335/ja" target="”_blank”" rel="noopener"><img src="/wp-content/uploads/2024/12/line.png" alt="LINEアイコン" width="512" height="512" class="aligncenter size-full wp-image-148" /></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="/wp-content/uploads/2024/12/01.png" alt="振り向きねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-142" />
</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="/wp-content/uploads/2024/12/04.png" alt="寝そべりねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-143" />
</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="/wp-content/uploads/2024/12/01-1.png" alt="どすけべねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-144" />
</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="/wp-content/uploads/2024/12/07.png" alt="マリトッツォねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-145" />
</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>

.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;
}

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

comment コメントをキャンセル

: めちゃくちゃ便利「CSS Stock」で様々なデザインをコピペしちゃおう

ええ、めちゃくちゃ便利なサイトみつけました「CSS Stock」というサイトです色々なデザインがあり導入もすごく簡単で分かりやすいです(*'ω'*) 見つけた時はすごく感動しました( *´艸｀) ...

CSS HTML 作業効率

: 【第4回】何度もくり返したい！PHPの「繰り返し（ループ）」入門

chatGPTに記事を書いてもらってますプログラムでは、同じ処理を何度も繰り返したいことがよくあります。そんなときに使うのが「ループ文」と呼ばれるものです！ PHPでよく使うループ文は、主に以 ...

HTML PHP

: ワードプレスのクラシックエディタにて[Tab]キーを押したら空白が入る様にする方法

ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい！この記事を書くまでは入れないか、スペースキーを押して誤魔化してま ...

HTML PHP WordPress

: レンタルサーバーに登録して、wordpressを入れてホームページを作成しよう

本サイトの初級講座を見たけれどホームページをネット上に載せる方法がわからない状態だとおもいます自分のホームページを作りたいけど、どう始めればいいかわからない。そんな方には、レンタルサーバーを使ってW ...

HTML WordPress

: 2025年現在において、Sassって必要か否か？

Sassって必要ですか？ Web開発をする上で「Sass」というCSSプリプロセッサを相当の確率で目にするはずです。しかし、このツールが本当に必要なのかという質問は、意外と議論されていないように感じま ...

HTML

【WordPress】自動で挿入される＜p＞タグや＜br＞タグを無効化する方法

横幅と連動して文字のサイズを変更するようにしよう

自作でホップアップ処理を作る

クラシックエディタ用のプラグインを作ってみた

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた