ポップアップウィンドウの作り方

ポップアップウィンドウを作成する方法は、若い初心者プログラマーの心を刺激する質問です。 そして今日は、このポップアップウィンドウの作成方法を見ていきます。 私たちがやることは本当にとても、とても面白くて機能的だからです。

そこで、ある顧客のWebサイトに実装したのと同様のウィンドウを作成します。 見れば分かります。 このようなウィンドウを作成するこの方法の大きな利点は、JavaScriptを使用せず、お気に入りのCSS3とHTML5に限定することです。 これにより、1つの石で数羽の鳥を殺します。 まず、サイトの読み込みを容易にします。次に、コードの使用を最小限に抑えて、便利で簡単な方法ですべてを実装します。これにより、ポップアップウィンドウに任意のサイズ、色、形状を個別に指定できます。 素晴らしいと思います。 それでは始めましょう。

すでにWebサイトがあり、「登録」や「オンラインアプリケーション」などのボタンをどこかに実装したいとします。 また、このボタンをクリックして、ユーザーにデータを入力できる小さなウィンドウを表示して、サイト管理者に送信するようにします。 これがこれから作成するウィンドウです。

まず、このボタンを作成しますが、問題なく作成できると思います。 しかし、タグで 次の#openModalを作成する必要があります . これはあなたにとってそれが大まかに見えるべき方法です。 次に、終了タグの前 以下のコードを書いてください。 装飾とIDにはクラスを使用することに注意してください。 このルールに従って、無数の異なるポップアップを作成できます。

今、私たちはすべてを美しく配置し、すべてが正常に機能するようにする必要があります。 作り始めましょう。

登録

ModalDialog（位置：固定;フォントファミリ：Arial、Helvetica、sans-serif;上：0;右：0;下：0;左：0;背景：rgba（0,0,0,0.8）; z-index ：99999; -webkit-transition：不透明度400msイーズイン; -moz-transition：不透明度400msイーズイン;トランジション：不透明度400msイーズイン;表示：なし;ポインタイベント：なし;）

上記のコードはとてつもなく単純です。 しかし念のため、多くの初心者が私のブログを読んでいることを知っているので、考えられる問題を分析します。 窓が常に一箇所にあるように、固定位置にしました。 また、ウィンドウが全画面に広がるように、コーナーの座標をポイント0に設定しました。背景には黒を設定し、透明度を追加することで、周囲を暗くします。 モーダルウィンドウ..。 ウィンドウをページの残りの部分の上に保つには、大きく設定します z-index..。 私たちのお気に入りのモーダルウィンドウのスムーズな出現と消失のために、そしてそれは私を信じて、 遷移..。 ウィンドウを非表示にするには、設定する必要があります 表示に 無し..。 プロパティ ポインタイベント要素の対話性（クリック可能性）を制御できます。

ポップアップウィンドウを開く

窓の飾り付けをしました。 だが！ それは、あなたが私に言う、動作しません。 はい、答えます、そうです。 今のところ楽しい部分です。 疑似クラスはCSS3に登場しました 目標、あなたが何を言おうと、本当に便利なことです。 そして、それがまったくないモーダルポップアップウィンドウで。 それは何をするためのものか。 この疑似クラスは、で定義されている要素で指定されている場合 アドレスバー idとして、私たちの場合は #openModal。次に、この疑似クラスのプロパティは、ターゲット要素のプロパティよりも重要になります。 あなたは私がやりたいことをすでに理解していると思います。

ModalDialog：ターゲット（表示：ブロック;ポインターイベント：自動;）。ModalDialog> div（幅：400px;位置：相対;マージン：10％自動;パディング：5px 20px 13px 20px;ボーダー半径：10px;背景：＃ fff;背景：-moz-linear-gradient（＃fff、＃999）;背景：-webkit-linear-gradient（＃fff、＃999）;背景：-o-linear-gradient（＃fff、＃999）; ）

疑似クラス 目標 DISPLAYをBLOCKに設定して、ウィンドウをポップアップします。 POINTER-EVENTSプロパティは、リンクアクティビティを制御します。
DIVプロパティは、ウィンドウの幅、画面上の位置、およびウィンドウをページの中央に設定するためのパディングを設定します。 残りのプロパティは、ページ内の余白、角の丸み、ウィンドウの背景を白から濃い灰色へのグラデーションで設定します。

モーダルウィンドウを閉じる

ウィンドウデザインが設定されて開いたら、ウィンドウを閉じるボタンを作成する必要があります。これをデザインして機能を実装するには。 CSS3とHTML5を使用すると、画像を使用せずにスタイリッシュなカスタムボタンを作成できます。

閉じる（背景：＃606061;色：#FFFFFF;行の高さ：25px;位置：絶対;右：-12px;テキスト-整列：中央;上：-10px;幅：24px;テキスト-装飾：なし;フォント-重み：太字; -webkit-border-radius：12px; -moz-border-radius：12px; border-radius：12px; -moz-box-shadow：1px 1px 3px＃000; -webkit-box-shadow：1px 1px 3px＃000; box-shadow：1px 1px 3px＃000;）。close：ホバー（背景：＃00d9ff;）

これは既知の事実です。ほとんどの訪問者は、オンラインストアの製品ページに初めてアクセスしたときに購入せず、リードを残しません。しかし、その大多数はどれくらいの大きさですか。

SeeWhy社の調査によると、これらは最初にリソースにアクセスした訪問者の99％です。 もちろん、私たちは主にeコマースサイトについて話していますが、それでも疑問が生じます。訪問者の99％が最初の訪問で何も購入しない場合、どうすれば彼らに戻ってくるように促すことができるでしょうか。

良いニュースは次の統計です：訪問者の75％は、購入を完了するために後で戻ってくることをいとわないです。

ポップアップウィンドウについてどのように考えても、このマーケティングテクノロジーは、注目を集め、連絡先情報を収集するのに効果的です（リード生成）。

簡単に言えば、ポップアップウィンドウを使用して、訪問者をランディングページにすばやく戻すことができます。

どうして？

これは、「パターンの中断」と呼ばれる説得手法によるものです。特定のリズムや一連のナレーションによって注意が「落ち着く」と、突然、予期しない何かが突然積極的に引き付けられます。 映画やユーモラスな番組を見たり、重要な交渉をしたりするときにも、この効果を経験することがよくあります。

コンテンツとEメールのマーケティングに関しては、読者が問題を解決し、対話を続ける（ニュースレターの登録、購入など）ことをすでに決心している場合、「パターンの中断」が最も効果的です。

Made.comサービスの例。 マーケターは訪問者にほんの些細なことで10ユーロの無料バウチャーを提供しました-住所 Eメール..。 これが行われた理由は次のとおりです。

1. 誰もがお金の贈り物が大好きです。
2. 通常の電子メール連絡の€10は少額です。

ExactTargetによると、電子メールは顧客にとって最も好まれるマーケティングチャネルであり、消費者の77％が他のブランドエンゲージメントチャネルよりも電子メールを好んでいます。

たぶんポップアップはそれほど悪くないですか？

たぶん、あなたはポップアップを嫌い、あなたはそれを受ける権利があります。 それでも、ランディングページに切り替えた直後にこのようなものを見たい人は次のとおりです。

またはこのように：

あなたは会社の活動分野についてさえ知らないかもしれませんが、すでにポップアップウィンドウで首までいっぱいになっています。 上記の例は失敗しました。まず、訪問者はブランドについて詳しく知りたいと考えています。次に、「無料トラフィック生成ガイド」、「無料」をダウンロードします。 電子書籍「もちろん、ほとんどのユーザーはそのようなことを嫌い、ブランドとの対話を拒否することで対応します。

少し冷やしてテスト結果を見る価値があるかもしれません。 数字は何と言っていますか？ これは、ポップアップの分割テストとポップアップオファーの「いいえ」ボタンのデータです。

印象的ですか？ 次に、このアプローチを効果的に使用している企業の結果を見てみましょう。

1.ポップアップの使用経験

通常、WPビギナーはおかげで約70-80の新規加入者を獲得します さまざまな方法リードジェネレーション。 しかし、サブスクリプションベースが大きいほど、ビジネスは成功するため、サービスのマーケターはポップアップを使用したいくつかの実験を決定しました。

何が行われたのですか？

ユーザーがサイトを離れようとしたときに表示されるポップアップウィンドウが開発されました。 この効果は、カーソル追跡技術やその他の方法のおかげで達成されました。 これはウィンドウがどのように見えたかです：

結果はどうなりますか？

重要なページ（サイト全体ではない）のポップアップにより、サインアップが660％増加しました。 つまり、サービスは1日あたり70〜80件のリードから445〜470件のリードに移行し、質的に新しいレベルに飛躍しました。

次のケースはBacklinkoからです。 ニュースレターの購読を申し出てランディングページにCTAを追加した後、コンバージョンは1.73％に低下しました。これは、緊急に行う必要がありました。 同社のマーケターは、ランディングページを離れることを決定したユーザーの前に表示されるポップアップウィンドウを開発しました。 これはそれがどのように見えたかです：

ポップアップを使用する前のコンバージョン率は約1.7％だったことを覚えていますか？ 発売から2日で、ポップアップ統計が変更されました。 わずか2日で、コンバージョン率は1.73％から4.83％に増加し、2倍以上になりました。

もちろん、1つの有能なテストでコンバージョンを100、300％、さらには1300％増加させることができる世界では、この実験の結果は控えめに見えます。 ただし、これは完全に真実ではありません。

まず第一に、大規模な加入者ベースで、マーケターは彼らの聴衆に関連するコンテンツを作成し、クロスセリングシステムをセットアップすることができます。 したがって、アップセールスやその他の要因を考慮すると、1回の連絡で平均15ドルのサービスが提供されます。

ポップアップウィンドウで1日あたり15人の追加サブスクライバーが発生した場合、1日あたりの収入は平均225ドル、年収はそれぞれ82,125ドル増加します。 設定を確認してから2分で収入は悪くないですよね？

明らかに、ポップアップ嫌いは間違っていました。 ただし、他の要因もあります。バウンス率とポップアップがユーザーエクスペリエンスに与える影響です。 これはどうですか？

2.ポップアップはユーザーエクスペリエンスとバウンス率にどのように影響しますか？

ポップアップについて言及するときの最初の考えの1つは、バウンスの数の増加です。これは、ポップアップが原因でランディングページを離れる人が増えるためです。これは、絶対に論理的です。 ただし、上記の例を思い出してください。WPビギナーマーケターはこの指標の変動を認識していませんでした。また、Backlinkoも認識していませんでした。どちらの場合もバウンスの数は変化しませんでした。

ダン・サレーラは、彼の個人的なテストを実行した後、同じ結論に達しました ランディングページポップアップの存在がバウンス率にまったく影響を与えないことを確認した後。 変更された唯一のことは、ポップアップを削除することにより、ダンは着信リードの50％を失ったことです。

3.ユーザーエクスペリエンスはどうですか？

訪問者は気にしないようです。 WPビギナーマーケターは顧客からポップアップの苦情を受けていません。

あなたがそれについて考えるならば、それは理にかなっています。 はい、Facebookからのリンクを介してリソースにアクセスした後、このようなものを見るのは不快です：

しかし、これはサイトを怒らせる理由ではありません。 そのような場合、あなたは通常何をしますか？ 正解-ポップアップウィンドウを閉じて、目的のコンテンツの検索を続行します。

さらに、Veroサービスの場合と同様に、ポップアップを適切に使用することで、ユーザーエクスペリエンスを向上させることができます。 メインページに移動し、30秒以内に何もしなかった場合、隅に「今すぐVeroに登録できない理由は何ですか？」というテキストのウィンドウが表示されます。

4.ポップアップでユーザビリティを破壊する方法は？

ただし、ポップアップ広告をランディングページに埋め込んで、高いコンバージョンを期待することはできません。 ポップアップウィンドウがページ上で強調表示されていない場合は、少なくとも役に立たない。

ランディングページを離れようとしています、そして...バム！ 何か理解できないことが起こりました。ページの中央のどこにCTAボタンが表示されましたか？ 実際、このポップアップは影のないページにオーバーレイされ、背景に溶け込んでいます。 ポップアップをページの残りの部分から分離しないと、ユーザーエクスペリエンスが大幅に損なわれます。

結局のところ、多くのマーケターはポップアップについて間違っています-それは彼らがまだ働いていることがわかります。 次に、ランディングページでポップアップを使用して最大の効果を得る方法を学習します。

5.効果的なポップアップを作成します

ポップアップの作成を開始する前に、主なタイプを見てみましょう。 ポップアップウィンドウには、主に2つのタイプがあります。

1. 大きな窓（オーバーレイ）。
2. ページをスクロールした結果としてポップアップするウィンドウ。

オーバーレイ

上記の例のようになります。 このようなウィンドウは画面全体を覆い隠し、背景を暗くします。 ポップアップは、ユーザーにはっきりと見えるページ上の唯一の要素のままです。 最近この形式ではポップアップウィンドウを使用する傾向があります。

有名なマーケティング担当者のDanZarellaも、背景を暗くしたオーバーレイを使用していますが、ウィンドウ自体は通常よりもはるかに小さくなっています。

ページスクロールの結果としてポップアップするウィンドウ

これらの種類のポップアップは、ユーザーがページをある段階にスクロールしたときに表示されます-ほとんどの場合 このフォーマットブログで使用されており、非常に効果的です。 ページの半分を下にスクロールすると、次のようなものが表示されます。

使用しているソフトウェアまたはプラグインに応じて、スクロールの深さ、つまりユーザーがポップアップを表示するためにどこまで行かなければならないかを試すことができます。 さらに、ユーザーがサイトで費やした時間に基づいてポップアップの外観を設定できます。

CTAのコンテンツと同じ要件が、ポップアップの見出し、フィールドのテキスト、およびボタンに適用されます。 結局のところ、ポップアップは行動を促す要素であり、その目的はビュー/サブスクライバー/リードを増やすことです。

6. ベストタイムポップアップを表示する

オーバーレイのテストについて説明すると、SumoMeサービスは次のデータを収集しました。今日、最適な時間は、訪問者がランディングページにアクセスしてから5秒です。

whichTestWonサービスは、さまざまな統計を提供します。 テスト中、ユーザーが着陸してから15、30、45秒後のオーバーレイの外観がチェックされ、最初のオプションが最適な結果を示しました。15秒後のウィンドウの外観は、30秒のオプションよりも11％効果的です。 、着陸後45秒でオプションより50％多い...

ただし、覚えておいてください。それぞれの場合にテストが必要なため、ウィンドウが表示される理想的な時間はありません。 ポップアップの頻度の問題についても同じことが言えます。 簡単に言えば、他の人のリソースの統計は、あなた自身のテストの動機付けになる可能性がありますが、模倣の対象であってはなりません-テスト。

PopUPは、Webトラフィックを促進したり、電子メールアドレスを収集したりするために設計されたポップアップ広告です。 このような要素は、多くの場合、WorldWideWebでのオンライン広告の形式です。 通常、これらは広告を表示するためにWebブラウザで開く新しいウィンドウです。 これらは通常、クロスサイトスクリプティング（XSS）を使用し、場合によってはセカンダリペイロードを使用してAdobeFlashを使用してJavaScriptによって生成されます。

PopUPフレーバーは、アクティブウィンドウで非表示になっている新しいブラウザウィンドウで開くポップアップ広告です。

起源の歴史

最初のポップアップ広告は、1990年代後半にTripod.comに掲載されました。 Ethan Zuckermanは、バナー広告に関する苦情に応えて、別のウィンドウで広告を実行するコードを作成したと主張しています。 その後、開発者は、彼の発明が引き起こし始めた不便について繰り返し謝罪しました。

Operaは、ポップアップブロックツールを組み込んだ最初の主要なブラウザでした。 その後、Mozillaは、ページの読み込み時に生成されるPopUPをブロックすることにより、これらの開発を改善しました。 2000年代初頭、Internet Explorerを除くすべての主要なWebブラウザーでは、ユーザーは不要なポップアップ広告をほぼ完全に削除できました。 2004年、MicrosoftはWindows XP SP2をリリースしました。これにより、このブラウザにもブロックが追加されました。

最近のほとんどのブラウザには、ポップアップ保護ツールが付属しています。 サードパーティのツールには通常、広告のフィルタリングなどの他の機能が含まれています。

ポップアップウィンドウ

特定の種類のダウンロード可能なコンテンツ（画像、フリーミュージックなど）がポップアップを引き起こす可能性があります。 また、通常のWebページのように見えることがあり、検索バーにサイト名が表示されます。 多くのリソースは、ポップアップを使用して、現在開いているページを中断せずに情報を表示します。 たとえば、Webページのフォームに入力し、追加のガイダンスが必要な場合、PopUPは、フォームに既に入力されているデータを失うことなく、追加情報を提供します。 ほとんどのポップアップブロッカーはこのダウンロードを許可します。

ただし、McAfeeで使用されているものなど、一部のWebインストーラーは、ポップアップウィンドウを使用してソフトウェアをインストールすることに注意してください。 多くのインターネットブラウザでは、Ctrlキーを押しながらリンクをクリックすると、フィルタがバイパスされます。

この場合、1つのポップアップウィンドウをクリックすると（誤ってでも）、他のウィンドウが開く可能性があります。

ポップアップブロッカーをバイパスする

組み合わせ 広告バナーポップアップは、DHTMLを使用してページコンテンツ上に画面に表示する「ホバー広告」です。 から JavaScriptを使用する広告は、のWebページの上にオーバーレイできます。 透明な層..。 この広告は、広告主が望むときにほとんどすべての場合に表示できます。 このようなPopUPウィンドウスクリプトは、事前に通知することはできません。 たとえば、広告には、広告主のサイトに関連付けられたAdobeFlashアニメーションが含まれている場合があります。 通常のウィンドウのように見えることもあります。 広告はウェブページの一部であるため、ブロッカーでブロックすることはできませんが、を使用することで回避できます。 サードパーティアプリケーション（AdBlockやAdblockPlusなど）またはカスタムスタイルシートを使用します。

PopUNDER

このような宣言は通常のPopUPウィンドウのように見えますが、メインのブラウザウィンドウの前ではなく、後ろに隠れて表示されます。 ポップアップ広告が広まり、コンピュータの画面全体を占めるようになると、多くのユーザーは見ずにすぐにポップアップ広告を閉じることを学びました。 そのため、ユーザーがサイトのコンテンツを表示することを妨げないPopUNDERが表示されました。 メインブラウザウィンドウが閉じられるか最小化されるまで、それらは見過ごされる傾向があります。 調査によると、ユーザーはあまり邪魔に見えないため、ポップアップ広告よりもこれらの広告によく反応することがわかっています。

人気の広告技術

この広告は、Netscape2.0B3ブラウザを使用して1997年に導入された2つの非常に単純なJavaScript機能を使用しています。 この方法論はインターネットで広く使用されています。 最近のWebパブリッシャーと広告主は、これを使用してページのコンテンツの前にウィンドウを作成し、広告をロードして、画面外に送信します。

最近のほとんどのブラウザでは、ユーザー操作（マウスクリックなど）が発生した場合にのみポップアップを開くことができます。 非対話型の呼び出し（タイマーコールバック、ロードイベントなど）は、新しいウィンドウをブロックします。 この制限を回避するために、ほとんどのポップアップ広告は、ドキュメントまたはドキュメント本文に直接接続されたマウスイベントリスナーでトリガーされます。 これにより、他のイベントハンドラーによって消費されなかったページ上のマウスクリックのすべてのインスタンスをキャプチャできます。 たとえば、ユーザーがテキストを選択すると、ドキュメントに添付されているリスナーがマウスのクリックに気づきます。 これにより、上記のコードを使用したポップアップが表示されます。

トリッキーなPopUPウィンドウジェネレータ

さまざまなWebサイトやWebアプリケーションのユーザーは、ブラウザーを使用するときに常に不要なポップアップに直面します。 通常、このようなPopUPウィンドウは、「閉じる」または「キャンセル」機能を使用して削除されます。 これは典型的なユーザーの反応であるため、開発者はいくつかのトリックを適用し始めました。 だから、開発するとき 広告メッセージ「閉じる」または「キャンセル」オプションに似た画面上のボタンまたはコントロールが作成されます。 ただし、ユーザーがこれらのオプションの1つを選択すると、ボタンは予期しないアクションまたは不正なアクションを実行します（たとえば、新しいポップアップウィンドウを開いたり、不要なファイルをユーザーのシステムにダウンロードしたりします）。

Webデザイン技術により、作成者はあらゆる種類の「模倣」を使用できるため、一部のユーザーは、ポップアップ内の要素をクリックしたり操作したりすることをまったく拒否します。

URLリダイレクト

場合によっては、バックグラウンドURLリダイレクト機能を使用してURLが広告ページにリダイレクトされます。 新しいタブで開くことがあり、リダイレクトを使用して古い背景タブのコンテンツが広告ページに置き換えられることがあります。 AdblockPlus、uBlock、またはNoScriptは、これらのポップアップリダイレクトをブロックできません。 この機能は、ポップアップウィンドウをよりアクティブにする方法を探している広告ディストリビューターによってますます使用されています。

ポップアップを取り除く方法

ブラウザで広告を削除するにはどうすればよいですか？ 最初に更新を確認してください。 ブラウザを最新の状態に保つことは、ポップアップとの戦いに大いに役立ちます。 ほとんどのブラウザは自動的に更新されるように設定されていますが、オフにすることもできます。 このプロセスは通常、数分しかかかりません。

• Firefox：左上隅にあるアプリケーションの名前が付いたボタンをクリックします。 [ヘルプ]にカーソルを合わせ、[Firefoxについて]を選択します。 これにより、ブラウザのバージョンに関する情報を含むウィンドウが開きます。 ブラウザが自動的にダウンロードおよびインストールされない場合。
• Chrome：右上隅のメニューボタンをクリックします。 下部にある[Chromeについて]を選択すると、これが開きます 新しいはめ込みブラウザはアップデートをチェックします。 含まれている場合は、自動的にインストールされます。
• Internet Explorer：更新方法は、使用しているブラウザーのバージョンによって異なります。 古いオプションの場合は、Centerにログインする必要があります WindowsUpdate..。 Internet Explorer 10および11の場合、有効にすることができます 自動更新歯車アイコンをクリックし、[InternetExplorerについて]を選択します。

更新が役に立たない場合

サイトなどのポップアップウィンドウが表示される場合があります ソフトウェア埋め込みが深すぎて、更新で削除できません。 このような場合、Webブラウザを再インストールまたは変更すると、問題の解決に役立つ場合があります。

最初にダウンロード 最新バージョン使用したいブラウザ。 ダウンロードリンクは次の場所にあります。 ホームページ各アプリケーション。

今日はあなたのサイトのためにあなた自身のポップアップウィンドウを作成する方法について話します。 今 この方法は非常に人気がありますが、その実装のためのソリューションのほとんどは有料です。 エントリ内のあまりきれいではないウィンドウの例（ただし、これは単なる例です）...

この投稿では、このようなポップアップウィンドウを作成する方法を学習します。 シンプル、高速、効果的、そして最も重要なのは無料です！

ポップアップウィンドウは、基本的に2つの部分で構成されています。 1つ目は、一般的な背景を暗くすることです。 2番目はウィンドウ自体です。 次に、ウィンドウは通常、タイトル、テキスト、およびサブスクリプションフォームに分割されます。 指定された構造を前提として、ウィンドウのベースを準備しましょう。

我々は持っています：
fs_popup_bg-サイトを暗くします。
fs_popup-ウィンドウ自体。
fs_popup_head-ウィンドウタイトル;
fs_content-ウィンドウのコンテンツ。2つの部分に分かれています。

それでは、必要なスタイルを書いてみましょう...

ポップアップウィンドウのスタイルを簡単に見てみましょう。
#fs_popup_bg-背景が黒くなり、ほとんど不透明（0.9）になり、左上隅に配置され、画面領域全体を占めることを示します。 この場合、要素の深さ、または他の要素からの上昇は非常に大きくなります（明らかに他の要素よりも大きくなります）。
#fs_popup-ウィンドウが背景より1レベル高くなることを示します（そうでない場合は表示されませんでした）。 角が丸く、境界線が赤い600px x300pxになります。
.fs_content_left、.fs_content_right-ブロックが左に押されており（同じレベルに配置する必要があります）、インデントとArialフォントがあることを示しています。

ウィンドウをコンテンツで埋めましょう：

そして、より美しいディスプレイのために私たちのスタイルを追加しましょう：

原則としてこれですべてです。 例からわかるように、ポップアップウィンドウのJavaScriptは、基本的に次の2つの場合に必要です。
1）ウィンドウを閉じるイベント。
2）「購読」ボタンをクリックしたときのイベント。
このウィンドウがに表示されたかどうかを確認することも問題ありません このコンピュータ..。 これらの目的には、Cookieの操作が非常に適しています。