javascript - JS : Implementing custom 'Are you sure you want to leave this page' modal dialog

标签 javascript html modal-dialog

我知道这可能之前已经讨论过,但我想知道 Facebook 是如何成功实现此功能的 - 在 https://www.facebook.com/messages/new 中: 当撰写消息然后尝试按浏览器中的“后退”按钮时,我会看到 Facebook 自己的自定义对话框,用于验证我是否真的想离开页面。

我知道我可以使用 beforeunload 事件来调出原生对话框,但我该如何创建自己的自定义对话框,例如 Facebook 的。

我认为一种方法可能是使用 jQuery 并对整个链接集运行一个事件。

但是它如何适用于其他所有内容(例如浏览器中的“后退”按钮)。

我想这可能与 pushState 控制有关,或者 facebook 可能使用了一些客户端框架,当按下“返回”时我实际上并没有卸载窗口。

无论如何,很乐意获得有关此问题的一些信息。

最佳答案

它只是 HTML、CSS 和 JS。在撰写消息(实际上只是一个表单)的情况下,设置您的 beforeunload 事件并检查是否已填写任何表单字段。如果已填写,请显示您的自定义 html。也许这可以帮助您入门:http://jsbin.com/ronuyo/1/

关于javascript - JS : Implementing custom 'Are you sure you want to leave this page' modal dialog,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13509690/

相关文章:

javascript - 如何在 Javascript 中更有效地执行检查和屏幕滚动?

javascript - 保留点击功能以在稍后的事件中启动

javascript - 如何在同一模式窗口中创建 3 个步骤?

java - 盾牌界面 : Insert row based on other row

javascript - Knockout.js 正在将数字转换为字符串

javascript - Google Chart 从数组中添加数据

objective-c - 将Safari IOS6的数据携带到App-mode IOS6,不可能?

wpf - 如何在我的 WPF 应用程序中为页面制作模式对话框?

javascript - 如何从 SignalR hub 方法更新 Kendo 调度程序?

javascript - 为什么我的 do/while 循环偶尔会运行失败?