0

重複の可能性:
Twitter ブートストラップでモーダル/ダイアログの削除を確認しますか?

Twitter のブーストラップ フレームワークを使用して、削除の確認ダイアログ ボックスを作成するにはどうすればよいですか?

バックエンドでオブジェクトの 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');
      }
    }
  });
});

かなりの確認ボックスを挿入したい。

4

2 に答える 2

2

これを確認してください：

http://bootboxjs.com/

于 2012-10-08T06:47:46.467 に答える
0

Bootbox.jsが最適なオプションです。それ以外は、このプラグインを確認できます。このプラグインをアンカーに使用して、リンクにリダイレクトする前に確認ポップアップを表示できます。

(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);
于 2012-10-08T06:51:10.350 に答える