How-To jQuery alert boxes for beginner

Question

Apologies if this is overly basic, but I couldn't find much info with my searches.

I have a simple link: <a href="delete">delete</a>.

Clicking the link deletes an item from my database.

How do I make the link show a popup (JavaScript alert box?) with a message:

Are you sure? [Yes] [No]

I'd like to use jQuery instead of inline JavaScript, if possible.

Answer 1

Start by giving your element an id.

 <a href="delete" id="delbtn">delete</a>

Then:

<script>
      $(document).ready(function(){

                $('#delbtn').click(function(){

                         return confirm("Are You sure");

                 });
      });
</script>

Answer 2

give id/class to your anchor:

<a href="delete" class="btn_del">Delete</a>

then on document load assign an event to clicking the link.

$(function(){  
    //on document ready
    $('.btn_del').click(function(e){
        return confirm('Are you sure?')
    })
})

Answer 3

Use jQuery UI's modal dialogs they're infinitely better than alert.

$("a#delete").click(function() {
    $("#dialog").dialog({
        bgiframe: true,
        resizable: false,
        height:140,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Really delete?': function() {
                $(this).dialog('close');
                                          delete();
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});