JavaScript モーダルポップアップ (Javascript Modal Popup)

WordPressでは、ポップアッププラグインを使用して簡単にモーダルポップアップをサイトに表示できます。 この記事では、JavaScriptを使用してページを読み込むときにモーダルポップアップを表示する方法について説明します。

CSSを使用してDiv要素をクリックしてモーダルポップアップが表示されるようにしたい場合は、次の記事を参照してください。

• [CSS]テキストをクリックすると、divがポップアップで表示されるようにする方法

JavaScript モーダルポップアップ (Javascript Modal Popup)

Google では、JavaScript を使用してページの読み込み時にモーダルポップアップを表示するさまざまな例を表示できます。

たとえば、「Creating a modal window on page load"というタイトルのStackoverflowの記事で、JavaScriptでモーダルポップアップを表示するコードを適用できます。

HTML：

<div id="modal">
    <div class="modalconent">
         <h1></h1>

        <p>팝업 내용 샬라샬라...</p>
        <button id="button">닫기</button>
    </div>
</div>

Javascript：

window.onload = function () {
    document.getElementById('button').onclick = function () {
        document.getElementById('modal').style.display = "none"
    };
};

CSS：

#modal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.modalconent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
}

ページの読み込み時にすぐにポップアップが表示されず、しばらく時間が経過した後にポップアップが表示されるようにしたい場合は、次のJavaScriptコードを適用できます（ソース： how to hide a div on page load with a 5 second delay).

function delay() {
  window.onload = function() {
    setTimeout(function() {
      document.getElementById("main_sec_2").style.display = "inline-block";
    }, 5000);
  }
}

delay();

さらに、サイトにアクセスするたびにポップアップが表示されることは、再訪問ユーザーに不快感を与える可能性があります。 XNUMX 日に XNUMX 回または XNUMX 日に XNUMX 回だけポップアップやバナーが表示されるようにすることを検討してください。

"XNUMX 日 XNUMX 回 div を表示「というStackoverflowドキュメントに記載されているJasコードを活用できます。

if(localStorage.last){
    if( (localStorage.last - Date.now() ) / (1000*60*60*24) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div
        document.getElementById('div').style.display = 'block'; //Show the div
        localStorage.last = Date.now(); //Reset your timer
    }
}
else {
    localStorage.last = Date.now();
    document.getElementById('div').style.display = 'block'; //Show the div because you haven't ever shown it before.
}

このブログでは、いくつかの記事（WordPress 関連文）を一定分量以上スクロールしたり、一定時間以上滞留すると Naver カフェ訪問バナーが表示されます。

• バナーをクリックする必要があり、記事を表示できるようにする方法（コンテンツロック）

上記のコードをうまく適用すると、ページにアクセスしたときに一定時間が経過するとポップアップが表示され、XNUMX日にXNUMX回だけ表示されるように設定できます。 ティーストーリーブログにそれを応用して Naver カフェポップアップが表示されるようにしてみました。

同様の方法でクパンサイトを強制的に訪問するように誘導することも可能ですが、その場合、訪問者に拒否感があり、直帰率が高くなる可能性があります。

Naver カフェ訪問バナーは効果的なようです。 これにより Naver カフェ加入会員が結構増えました。

ワープ社（WordPressを使う人） Naver カフェは WordPress、Webホスティング、CSSなどに関するさまざまな情報を共有します。 WordPress ユーザーと交流できます。 カフェを訪れると、カフェの運営に役立つことができます。

最後に、

以上、JavaScriptを使ってモーダルポップアップを表示する方法について簡単に見てきました。 上記の例でうまくいかない場合は、Googleで他のコードで試してください。

WordPressを運営する場合、 Brave Popupなどのプラグインを使用すると、ポップアップインプレッション数やクリック数などを確認でき、ポップアップの効果を判断するのに役立ちます。

「クパン訪問して読み続ける」バナーなどを実装するのが難しい場合 ここでサービス（有料）を依頼できます。 低コストでサービスを提供しています。

参照

• WordPress 前の投稿リンク
• Avada テーマメガメニュー全幅で表示する
• WordPress Newspaper テーマデモをインストールする
• 効果的なライティングのためのRank Math活用方法（SEOライティング）