ネットショッピングいろんなサイト見てると、ページを離脱しようとするとポップアップ画像が出るやつありよね？微妙にウザイやつ・・・
ああ、あのウザイやつね。あれはJSで作成するんだよ。せっかくなのでやってみよう！
JSをで作成するサイト訪問者離脱防止用ポップアップ表示です。（jquery必要）
難しい知識は置いといて以下に説明するソースをコピペで表示できる仕様にしています。
jqueryとJSの設置
まず、jqueryが必要なので、以下のコードを＜/head＞前に設置しましょう。
|
1 |
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> |
JSスクリプトの設置
同様に＜/head＞にJSのスクリプトを記述します。（先ほどのjqueryコードの下に設置）
下記のコードをコピペしましょう。
|
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 |
<script> var id = []; $(function(){ $(document).ready(function() { (function(b) { var c = function() { this.initialize(); }; c.prototype = { initialize: function() { history.replaceState("beforeunload", null, null); history.pushState(null, null, null); b(window).on("popstate", b.proxy(this.popstate, this)); }, popstate: function(b) { if (b.originalEvent.state === "beforeunload") { viewBackGuide(); } }, }; new c(); })($); }); //ポップアップ領域をクリックされた場合、ポップアップを閉じる $("#backGuide p").on("click", function() { $("#backGuide").hide(); //戻るボタンを連打された場合のための対策 id.forEach(function(idx) { //インターバルを全てクリア clearInterval(idx); }); }); function viewBackGuide() { //戻るボタン2回以上押下されたときの対策 history.pushState(null, null, null); $('#backGuide').show(); //ポップアップを3秒後に自動で閉じさせる id.push(setInterval(function() { $("#backGuide").hide(); //戻るボタンを連打された場合のための対策 id.forEach(function(idx) { //インターバルを全てクリア clearInterval(idx); }); }, 3000)); } }); </script> |
Div要素でhtml上に表示させたい要素を記述
Div要素のCSS定義
つぎに離脱防止で表示させたいDiv要素をcssで作成します。
ここではbackGuideという要素を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#backGuide, #backGuide p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #backGuide { display: none; position: fixed !important; background-color: #333; z-index: 9999; } #backGuide p { display: block; width: 300px; height: 263px; line-height: 80px; margin: auto; cursor: pointer; font-weight: bold; } |
HTMLコードの設置
最後にhtmlにさきほど作成したbackGuideの要素を記述します。
今回はポップアップで画像を表示させたいので、#backGuideの中身は画像を挿入します。
|
1 |
<div id="backGuide"><p><img src="表示させたい画像のパス"></p></div> |
これでOKです。試しにブラウザの戻るボタンを押してみてください。離脱防止の画像が表示されるかと思われます。
ちなみに、画像ではなくテキストで表示することも可能です。その際にはCSSのbackGuide pの項目を適宣カスタマイズしてください。
