Javascriptでの自動ポップアップ

ポップアップは、画面に突然表示される小さなウィンドウです。これらのポップアップには、テキスト、リンク、ボタン、さらには入力フィールドが含まれる場合があります。ポップアップは通常、オンライン広告の目的で使用されます。画面上のさまざまなサイズとさまざまな位置でそれらを行うことができます。外部サイトへのリンク、同じサイトのプロモーションコンテンツ、登録フォーム、登録フォームのニュースレターフォームなどが含まれる場合があります。ウェブサイトでは、売り上げの増加、ウェブサイトの登録ユーザーの増加、トラフィックの増加など、さまざまな理由でポップアップが使用される場合があります。。

ユーザーはポップアップを煩わしく感じるかもしれないので、適切に配置する必要があります。ポップアップデザインが最適化され、SEOに適していることに注意する必要があります。いくつかの基本的なルールは、誤解を招くコンテンツを配置しない、ポップアップを適切な画面位置に配置するなど、アクションボタンと終了ボタンを明確に呼び出すことです。

ポップアップは、ウェブサイトが読み込まれた直後、ウェブサイトが読み込まれた数秒後など、さまざまな時間に画面に表示される場合があります。今日のチュートリアルでは、ページが読み込まれた数秒後に自動的に表示されるポップアップを作成する方法を学習します。完全に。このポップアップは、見出し、シンプルなテキストコンテンツ、召喚状ボタン、および終了ボタンで構成されています。このチュートリアルでは、いくつかの基本的なHTML、CSS、およびJavascriptが必要になります。

HTML：

これらのファイルが正常に作成されたら、コーディングから始めます。以下のコードをコピーして、HTMLファイルに貼り付けます。まず、クラス名を使用してdivを作成しpopupます。このdiv内には、IDが閉じるボタンがあります。いくつかのデモテキストと最後にリンクを含むh2およびp要素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Automatic Popup</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <!--Stylesheets-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="popup">
        <button id="close">&times;</button>
        <h2>This Is The Title</h2>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui, commodi minima magni ullam aliquam dignissimos?
        </p>
        <a href="#">Let's Go</a>
    </div>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

CSS：

CSSに来て、pop-upボックスにいくつかのスタイルを追加します。以下のコードをコピーして、スタイルシートに貼り付けます。基本的なCSSリセットを適用して、ブラウザによってデフォルトでHTMLドキュメントに追加されたパディングとマージンを削除します。次に、ボディの背景色として「＃0f72e5」を追加します。

ポップアップにいくつかの寸法を追加し、絶対位置決めと平行移動の方法で中央に配置します。text-alignを中央に設定します。ポップアップの右上に閉じるボタンを配置し、ボタンのように見えるようにリンクにいくつかのスタイルを追加します。最後に、ポップアップの表示を「なし」に設定します。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #0f72e5;
}
.popup{
    background-color: #ffffff;
    width: 450px;
    padding: 30px 40px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    font-family: "Poppins",sans-serif;
    display: none;
    text-align: center;
}
.popup button{
    display: block;
    margin:  0 0 20px auto;
    background-color: transparent;
    font-size: 30px;
    color: #c5c5c5;
    border: none;
    outline: none;
    cursor: pointer;
}
.popup p{
    font-size: 14px;
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}
a{
    display: block;
    width: 150px;
    position: relative;
    margin: 10px auto;
    text-align: center;
    background-color: #0f72e5;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 0;
}

Javascript：

javascriptに来たら、以下のコードをコピーしてjavascriptファイルに貼り付けます。'load'イベントリスナーをドキュメントウィンドウに追加します。この中にsetTimeout()は、ポップアップの表示を「ブロック」に設定する関数を含むがあります。を使用setTimeout()すると、一定の時間が経過した後にのみポップアップを表示できます。この期間は、必要に応じて変更できます。

最後に、閉じるボタンにクリックイベントを追加します。クリックイベントは、ポップアップの表示を再び「なし」に設定する関数をトリガーします。これでポップアップの準備が整いました。

window.addEventListener("load", function(){
    setTimeout(
        function open(event){
            document.querySelector(".popup").style.display = "block";
        },
        1000
    )
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});

では、ポップアップについてどう思いますか？それらは迷惑であり、避けるべきですか、それともオンライン広告の重要な側面ですか。下のコメントで教えてください。ハッピーコーディング！

リンク: https://codingartistweb.com/2021/08/show-popup-automatically-after-page-load-using-javascript/

#javascript

What is GEEK

Buddha Community

Javascriptでの自動ポップアップ

HTML：

<!DOCTYPE html> <html lang="en"> <head> <title>Automatic Popup</title>  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.css"> </head> <body> <div class="popup"> <button id="close">×</button> <h2>This Is The Title</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui, commodi minima magni ullam aliquam dignissimos? </p> <a href="#">Let's Go</a> </div>  <script src="script.js"></script> </body> </html>

CSS：

*, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #0f72e5; } .popup{ background-color: #ffffff; width: 450px; padding: 30px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; font-family: "Poppins",sans-serif; display: none; text-align: center; } .popup button{ display: block; margin: 0 0 20px auto; background-color: transparent; font-size: 30px; color: #c5c5c5; border: none; outline: none; cursor: pointer; } .popup p{ font-size: 14px; text-align: justify; margin: 20px 0; line-height: 25px; } a{ display: block; width: 150px; position: relative; margin: 10px auto; text-align: center; background-color: #0f72e5; color: #ffffff; text-decoration: none; padding: 5px 0; }

Javascript：

window.addEventListener("load", function(){ setTimeout( function open(event){ document.querySelector(".popup").style.display = "block"; }, 1000 ) }); document.querySelector("#close").addEventListener("click", function(){ document.querySelector(".popup").style.display = "none"; });