javascript - jquery脏记录，想要jquery ui模式

Question

我正在使用this测试表格是否脏了。它默认为标准浏览器确认，询问您是否确定要离开此页面。在 jquery dirtyforms 网站上，有一个部分表示您可以使用 jquery ui 模态表单。

所以我尝试添加一个部分(div)，如下所示:

 <div id="unsavedChanges" title="Save Changes?">
            <p>You've made changes to this page. Do you want to leave this page without saving?</p>
        </div>

然后我添加了他们的代码:

 $.DirtyForms.dialog = {
        selector: '#unsavedChanges',
        fire: function(message, dlgTitle) {
            $('#unsavedChanges').dialog({ title: dlgTitle, width: 350, modal: true });
            $('#unsavedChanges').html(message);
        },
        bind: function() {
            $('#unsavedChanges').dialog('option', 'buttons',
                [
                    {
                        text: "Stay Here",
                        click: function(e) {
                            $.DirtyForms.choiceContinue = false;
                            $(this).dialog('close');
                        }
                    },
                    {
                        text: "Leave This Page",
                        click: function(e) {
                            $.DirtyForms.choiceContinue = true;
                            $(this).dialog('close');
                        }
                    }
                ]
            ).bind('dialogclose', function(e) {
                // Execute the choice after the modal dialog closes
                $.DirtyForms.choiceCommit(e);
            });
        },
        refire: function(content) {
            return false;
        },
        stash: function() {
            return false;
        }
    };

虽然我不确定他们希望我将其放置在哪里(我最初将其放置在 document.ready 之外。但是，在运行此命令并对我的表单进行更改并导航后，我看到它仍然使用浏览器确认而不是 jquery ui 对话框。我在这里做错了什么？

Answer 1

如果用户尝试通过单击页面上的 anchor 或其他元素离开，您仅会弹出自定义对话框。

然后您可以拦截所有 anchor 等的点击，阻止它，弹出一个自定义对话框进行确认。换句话说，当有人点击您页面上的某个元素时，您就可以掌控一切并可以做任何您想做的事情。

但是，当用户试图通过关闭选项卡或浏览器来离开时，您无法使用 JavaScript 来阻止他们，因为如果网站可以这样做。

通过关闭选项卡/浏览器窗口来提示用户离开的唯一方法是使用 onbeforeunload 事件，并且该事件只能与 native 确认对话框，无法使用自定义对话框或停止用户或执行任何其他操作，因为这可能会导致某些网站创建您永远无法真正离开该网站的系统。