JavaScript モーダルポップアップ (Javascript Modal Popup) - WordPress 情報パッケージ
인기 WordPress テーマブルフセール 詳細

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

Last Updated:2022年11月10日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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 カフェポップアップが表示されるようにしてみました。

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

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

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

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

最後に、

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

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

参照



コメントを残す

コメント