0

私はこれを達成したい:

ユーザーが Google Ad-words 経由で私たちのページにアクセスし、ブラウザの [戻る] ボタンを使用してページを離れようとしている場合、レンダリングされたオーバーレイとその中にいくつかのものを表示したいと思います (「探しているものが見つかりませんか?私たち、私たちはあなたを助けます！」...何とか何とか）。もちろん、ユーザーはそれを閉じて Google に戻ることができます。

ユーザーがブラウザで「戻る」ボタンを押したときに呼び出されるイベントハンドラを取得するためのホエーはありますか? :-)

また、これはリンクの押下やページのリロードには影響しません。

ドイツからのご挨拶

4

1 に答える 1

0

オーバーレイとなる div と、ユーザーに表示する情報を含むダイアログ ボックスを作成する必要があります。イベントがトリガーされたら、jquery.show() を使用してオーバーレイとダイアログ ボックスを表示します。

次のようなことを試すことができます：

<html>
   <head>
      <style type="text/css">
           #fullscreen { display:none; position: fixed; z-index:500;  min-height: 100%;  min-width: 1024px;  width: 100%; height: auto; background-color: #565656; top:0; left:0px; margin:0; padding:0; opacity: .5;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";  filter: alpha(opacity=50);}      
           #myDialog {display:none;}
      </style>
   </head>
   <body>
      <div id="fullscreen"></div>
      <div id="myDialog title="My Dialog Title" ></div>
   </body>

   <script type="text/javascript>
$(document).ready(function () {
    //When the user attempts to navigate away from the current page...
    $(window).unload(function () {
        $('fullscreen').show();

            $(function () {
                $("#myDialog ").dialog({
                    resizable: false,
                    closeOnEscape: false,
                    width: 660,
                    modal: true,
                    open: function (event, ui) {
                        //hide close button.
                        $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
                    },
                    buttons: {
                        "OK": function () {
                            $(this).dialog("close");
                            $("fullscreen").hide();
                            window.location = "http://mypage.com";
                        },
                        "No, thanks": function () {
                            $(this).dialog("close");
                            $("fullscreen").hide();
                        }
                    }
                });
            });
       });
    });
});
</script>
</html>

次に、必要なアクションを実行します。jQuery のこれらの側面に慣れていない場合は、ダイアログのドキュメントを参照することをお勧めします: http://jqueryui.com/dialog/

于 2013-10-23T15:14:46.763 に答える