xhow to create a confirm delete dialog box with bootstrap framework?

Possible Duplicate:
Confirm delete modal/dialog with Twitter bootstrap?

How do I create a confirm delete dialog box using twitter's boostrap framework?

I have a link that will do an ajax delete of an object on the backend, but I want to make sure the user confirms that they want to delete before I send the request.

I'm using jQuery on the front-end and node.js/express on the backend.

The jQuery code looks like this:

$("a.remove").click(function(e){
  e.preventDefault();

  $.ajax({
    url: '/api/item/'+itemId,
    type: 'DELETE',
    success: function(d){
      if ( d.status == 'success' ) {
        app.msg({ type: 'info', msg: d.message, before: "#items" });
        $("#item_"+itemId).fadeOut();
        app.log('deleted');
      } else {
        app.msg({ type: 'error', msg: d.message, before: "#items" });
        app.log('failed');
      }
    }
  });
});

I want to inject a pretty confirmation box.

Please check this:

http://bootboxjs.com/

Bootbox.js is the best option. Other than that, you can check this plugin . This Plugin can be used for anchors, to show a confirmation popup before redirecting to the link.

(function($){
    $.fn.extend({
        confirmDialog: function(options) {
            var defaults = {
                message: '<strong>Are you sure</strong>',               
                dialog: '<div id="confirm-dialog" class="popover">' +
                            '<div class="arrow"></div>' +
                            '<div class="inner">' +
                                '<div class="content">' +
                                    '<p class="message"></p>' +
                                    '<p class="button-group"><a href="#" class="btn small danger"></a><a href="#" class="btn small"></a></p>' +
                                '</div>' +
                            '</div>' +
                        '</div>',
                cancelButton: 'Cancel'
            };
            var options =  $.extend(defaults, options);

            return this.each(function() {
                var o = options;
                var $elem = $(this)

                //is there an existing click handler registered
                if ($elem.data('events') && $elem.data('events').click) {
                    //save the handler (TODO: assumes only one)
                    var targetClickFun = $elem.data('events').click[0].handler;
                    //unbind it to prevent it firing
                    $elem.unbind('click');
                }else{
                    //assume there is a href attribute to redirect to
                    var targetClickFun = function() {window.location.href = $elem.attr('href');};
                }

                $elem.bind('click', function(e) {
                    e.preventDefault();
                    if(!$('#confirm-dialog').length) {

                        var offset = $elem.offset();
                        var $dialog = $(o.dialog).appendTo('body');

                        var x;
                        if(offset.left > $dialog.width()) {
                            //dialog can be left
                            x = e.pageX - $dialog.width();
                            $dialog.addClass('left');
                        } else {
                            x = e.pageX;
                            $dialog.addClass('right');
                        }
                        var y = e.pageY - $dialog.height() / 2 - $elem.innerHeight() / 2;

                        $dialog.css({
                            display: 'block',
                            position: 'absolute',
                            top: y,
                            left: x
                        });

                        $dialog.find('p.button-group').css({
                            marginTop: '5px',
                            textAlign: 'right'
                        });

                        $dialog.find('a.btn').css({
                            marginLeft: '3px'
                        });

                        $dialog.find('p.message').html(o.message);

                        $dialog.find('a.btn:eq(0)').text($elem.text()).bind('click', function(e) {
                            $dialog.remove();
                            targetClickFun();
                        });

                        $dialog.find('a.btn:eq(1)').text(o.cancelButton).bind('click', function(e) {
                            $dialog.remove();
                        });

                        $dialog.bind('mouseleave', function() {
                            $dialog.fadeOut('slow', function() {
                                $dialog.remove();
                            });
                        });
                    }
                });
            });
        }
    });   
})(jQuery);