Question

可能重复：
Confirm delete modal/dialog with Twitter bootstrap?

如何使用twitter的boostrap框架创建确认删除对话框？

我有一个链接会对后端的对象进行ajax删除，但我想确保用户在发送请求之前确认他们要删除。

我在前端使用jQuery，在后端使用node.js / express。

jQuery代码如下所示：

$("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');
      }
    }
  });
});

我想注入一个漂亮的确认框。

Answer 1

请检查：

http://bootboxjs.com/

Answer 2

Bootbox.js是最佳选择。除此之外，您可以查看this plugin。此插件可用于锚点，以在重定向到链接之前显示确认弹出窗口。

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

如何使用bootstrap框架创建一个确认删除对话框？

2 个答案: