当用户点击页面上的链接时,如何弹出警报框以进行验证?

时间:2013-07-08 23:40:12

标签: javascript jquery html confirm

我正在构建一个小型CMS,我有一个删除选项,用于帖子,页面等。这是一个链接,但现在我需要让它显示一个弹出警报或点击它的东西只是为了验证人们是否真的想要删除文章。 如果用户点击"是"然后它继续链接和删除,但如果人们点击"否"那么它不会让浏览器转到该链接并删除该文章。

我知道我可以用jQuery以某种方式做到这一点,但我已经2天没有睡觉了,我无法直接思考。有什么想法吗?

4 个答案:

答案 0 :(得分:3)

您可以使用jQuery发送confirm dialog。如果用户单击“确定”并确认,则可以返回true,这将允许自动跟踪链接。如果用户点击取消,您将cancel the event's default(链接上的点击事件的默认设置是转到它),然后不会跟踪该链接。

<强> 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;
    }
});

Try it out on jsFiddle!

答案 1 :(得分:2)

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

答案 2 :(得分:1)

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>

答案 3 :(得分:0)

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

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

demo

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;
});