Question

当用户在浏览任何网站时有意或无意单击Mobile中的“返回/返回”按钮时，我想显示自定义消息或弹出窗口。

示例：

我在Facebook上，打算去我的网站，以便在地址栏中键入我的域名，然后将其重定向到我的网站。

现在，如果我单击返回，则不应该去Facebook，而是要显示一条警告消息

“您确定要离开”

如果用户单击yes，它将把用户重定向到Facebook或以前来自其他任何站点的用户。如果用户单击No，则停留在同一页面（我的网站）上。

注意：我在说的是Mobile中任何浏览器中的“移动后退按钮”，而不是浏览器后退按钮。

请帮助我。

我尝试了OnBeforeUnload，OnUnload和PushState和Navigate事件，但是这些事件并没有达到我的期望。

Answer 1

HTML：

<a href="http://www.youtube.com/" id="alert_link" target="_blank" class="extlink-modal-trigger">Click here to leave site.</a>

<a href="http://www.youtube.com/" id="alert_link" target="_blank">Click here to leave site.</a>

<div id="confirm" class="modal hide fade">
<div class="modal-body">
    Do you want to Leave?
</div>
<div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Stay</button>
    <a href="" id="link" target="_blank">Leave</a>
</div>
</div>

css：

body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
    overflow-y: scroll;
}

@media (max-width: 979px) {
    .modal-open .page-container .navbar-fixed-top{
        overflow-y: visible;
    }
}

jquery：

$(document).ready(function () {
    $('a.extlink-modal-trigger[href^=http]').click(function (e) {
        e.preventDefault();
        $("#link").attr('href',this.href);
        $("#confirm").modal();
    });
});

尝试一下：

有效的提琴：http://jsfiddle.net/3kgbG/500/

在设备（任何移动设备）上显示自定义模态/弹出窗口后退按钮

1 个答案: