javascript - 当用户单击页面上的链接时，如何弹出警告框进行验证？

Question

我正在构建一个小型 CMS，我有一个用于帖子、页面等的删除选项。它是一个链接，但现在我需要让它在点击它时显示一个弹出警报或其他东西，以验证人们是否真的想要删除文章。如果用户单击“是”，则继续该链接并删除，但如果人们单击“否”，则不会让浏览器转到该链接并删除文章。

我知道我可以用 jQuery 以某种方式做到这一点，但我有 2 天没有睡觉，我无法思考。有任何想法吗？

Answer 1

您可以使用 jQuery 发送一个确认对话框。如果用户单击 OK 并确认，那么您可以返回 true，这将允许自动跟踪链接。如果用户单击取消，您将取消该事件的默认值（链接上的单击事件的默认值是转到它），然后该链接将不会被跟随。

HTML：

<a class="confirm" href="http://www.microsoft.com">Link</a>

JavaScript（使用 jQuery）：

$(".confirm").on("click", function(event){
    if(confirm("Are you SURE....?")){
       return true;
    } else {
        event.preventDefault();
        return false;
    }
});

在 jsFiddle 上试试吧！

Answer 2

$('a.confirm').click(function() {
    return confirm('Really delete this?');
});

Answer 3

HTML：

<a href='url_to_delete_page' onclick='return check()'>Click</a>

JavaScript：

<script type="text/javascript">
function check(){
        return confirm("Really delete it?");
}
</script>

Answer 4

如果您进行确认对话框，您可以href从按下的链接复制。

此代码的工作方式是自动绑定到与 class 的链接confirm。然后它修改一个确认对话框，让yes按钮执行原始链接的操作，并no隐藏对话框。

演示

的HTML：

<div class="dialog" id="confirmation">
  <div class="title">Are you sure?</div>
  <a href="#" class="yes">Yes</a>
  <a href="#" class="no">No</a>
</div>

<a href="#delete" class="delete confirm">Delete</a>

和 JavaScript。

$('#confirmation.dialog .no')
  .click(function(){
    $('#confirmation.dialog').hide();
});

$('a.confirm').on('click', function(){
  var $el = $(this), link = $el.attr('href'),
      $confirm = $('#confirmation.dialog'),
      $yes, $no;

  $confirm.show();
  $yes = $confirm.find('.yes');

  $yes.attr('href', link);

  return false;
});