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

2025年5月24日

サンプル

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

振り向きねこちゃん

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

JavaScriptコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54	`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';` `// スクロールバー分だけを戻す` `}` `});` `}`

HTMLコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150	`<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">` `<span` `class="pop-company">Creator Name: ふゆ</span><br />` `<span` `class="pop-name">種族:猫 <span` `class="pop-name2">振り向きねこちゃん</span></span>` `<div` `class="pop-qualification">趣味</div>` `<div` `class="pop-qualification-kinds"><span>・パチンコ・スロット</span></div>` `<div` `class="pop-word">` `パチンコ・スロットに人生を傾けるねこちゃん。振り向くのが大好き。` `</div>` `</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">` `<span` `class="pop-company">Creator Name: ふゆ</span><br />` `<span` `class="pop-name">種族:猫 <span` `class="pop-name2">寝そべりねこちゃん</span></span>` `<div` `class="pop-qualification">趣味</div>` `<div` `class="pop-qualification-kinds"><span>・発明・居眠り</span></div>` `<div` `class="pop-word">` `発明が得意なねこちゃん。居眠りが大好きで常に寝そべっている。` `</div>` `</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">` `<span` `class="pop-company">Creator Name: ふゆ</span><br />` `<span` `class="pop-name">種族:猫 <span` `class="pop-name2">どすけべねこちゃん</span></span>` `<div` `class="pop-qualification">趣味</div>` `<div` `class="pop-qualification-kinds"><span>・スケベ</span></div>` `<div` `class="pop-word">` `その名の通りどすけべなねこちゃん。商店街で飼われている看板ねこちゃん。` `</div>` `</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">` `<span` `class="pop-company">Creator Name: ふゆ</span><br />` `<span` `class="pop-name">種族:猫 <span` `class="pop-name2">マリトッツォねこちゃん</span></span>` `<div` `class="pop-qualification">趣味</div>` `<div` `class="pop-qualification-kinds"><span>・食べられること</span></div>` `<div` `class="pop-word">` `あのマリトッツォがねこちゃんになっちゃった。それ以上でもそれ以下でもない。` `</div>` `</div>` `</div>` `</div>` `</div>`

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

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112	`.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 コメントをキャンセル

: 【注意：音楽が鳴ります】HP上で音楽を再生させる処理(自動再生はできない？)

たまにＨＰ開くと音楽がなるページがありますよね（ほんまにたまに）あれがどうやって再現しているのか気になったので記述するまたタイトルにもある様に本ページは「パッヘルベルのカノン」が自動再生するので注 ...

HTML JavaScript WordPress プラグイン

: ほぼコピペでOK！ボタンの作成: 簡単にウェブデザインにボタンを追加する方法 [CSS Ribbon Shapes]

[cssbuttons.io]はボタンデザインを簡単に作成できるオンラインツールを提供しています。このツールを使うと、様々なボタンデザインを簡単にカスタマイズできます。選んだデザインを選択し、HT ...

CSS HTML

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

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありましたコード追加ボタンを自由に追加出来たら便利じゃない？この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...

HTML WordPress プラグイン

: タグが閉じれてないが箇所がわからない! Atomを使って簡単に探そう

HTMLのコードを打ち込んでいて、表示がバグることがあると思います。大抵閉じタグを入れ忘れているのですが、クラシックエディタでは目視ですぐにはわからないですよね。探し当てるのに何十分、最悪頭がパン ...

HTML 作業効率

: 「続きを読む」を押すと下にサッと文字が出てくる処理(JavaScript)

「続きを読む」を押すと下にサッと文字が出てくる処理の実装です。 JavaScriptを使って実装させております。文章はChatGPTに頼んだ… JavaScriptの[offset_height]は ...

CSS HTML JavaScript

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

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

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

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

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

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