Javascript确认对话框

Question

我想在删除按钮中添加一个确认对话框，询问用户是否可以删除所选项目。

如果没有，则不会发生任何事情，否则应该执行一个网址。

我知道如何通过一些JavaScript代码实现这一点，但我正在寻找一个代码较少的解决方案。我是说，例如：

<a href="mysite.de/xy/delete" onClick="...">Delete</a>

是否可以将整个功能放在onClick元素中而不在标题中添加额外的javascript？

Answer 1

您可return confirm()（返回true / false），如下所示：

<a href="mysite.de/xy/delete" onClick="return confirm('You sure??');">Delete</a>

You can test it here

Answer 2

更好（虽然远非理想！）：转过身来。除非你有JavaScript，否则不要让链接做任何事情：

<a href="#" 
  onclick="if confirm('Sure?') { window.location='http://mysite.de/xy/delete';}">
    Click to delete
</a>

这至少可以防止链接在没有JavaScript的情况下工作。这也降低了链接被Google，甚至某些本地插件意外抓取的风险。 （图片，如果你有一个试图加载/显示为缩略图的插件）链接悬停时的目标页面！）

不过，这个解决方案并不理想。您将实际浏览到该URL，并且该URL可能会显示在历史记录中。您实际上可以删除Bob，创建一个新的Bob，然后只需在浏览器中单击“返回”就意外删除它！

更好的选择是使用JavaScript或表单发布所需的操作。您可以使用POST方法向服务器发出请求，或者说可以更好地使用DELETE方法。这也应该防止网址被编入索引。

Answer 3

如果用户禁用了javascript，或者google出现并且链接了蜘蛛，请考虑会发生什么。您的实体会被删除吗？

更好的方法是发布要删除的表单。

Answer 4

有一个jQuery插件就是这样做的：jquery.confirm。

示例：

<a href="home" class="confirm">Go to home</a>

JS代码：

$('.confirm').confirm();

如果用户确认，则会将其重定向到<a>的链接，否则不会发生任何事情。

Answer 5

您可以使用此： 从以下位置下载bootboxjs：[1]：http://bootboxjs.com/

创建按钮（HTML）

<button type="submit" id="btn">Delete</button>

调用对话框：

  var myBtn = document.getElementById('btn');


  myBtn.addEventListener('click', function(event) {
      bootbox.confirm({
          size: "small",
          message: "Are you sure?",
          callback: function (result) {
              /* result is a boolean; true = OK, false = Cancel*/
              if (result == true) {
                  alert("ok pressed");
              }
              else {
                  alert("cancel pressed");
              }
          }
      })
  });