Bootbox confirm in bootstrap modal sends scroll cursor behind the modal

Question

I am using bootbox.confirm inside a bootstrap modal. the problem is the backdrop is layed behind the modal. And upon confirmation the scroll control goes behind the modal:

The code:

$('.deleteFile').on('click',function(){
        var url=$(this).data('url');
        var parent=$(this).parent();
        bootbox.dialog({
            message: "Are you sure you want to delete this File?",
            title: "Alert",
            buttons: {
                success: {
                    label: "Yes",
                    className: "btn-success",
                    callback: function () {
                        $.get(url,function(res){
                            res=$.parseJSON(res);
                            if(res.err===0){
                                parent.remove();
                            }
                        });
                    }
                },
                danger: {
                    label: "No",
                    className: "btn-primary",
                    callback: function () {

                        bootbox.hideAll();
                    }
                }
            }
        });

    });

Answer 1

This code will be helpful to you. (function(Modal) { var show = Modal.prototype.show;

    Modal.prototype.show = function() {
      this.modalOpen = !this.$body.hasClass('modal-open');
      show.apply(this, arguments);
    };

    Modal.prototype.hideModal = function() {
      var that = this;
      this.$element.hide();
      this.backdrop(function() {
        if (that.modalOpen) {
          that.$body.removeClass('modal-open');
        }
        that.resetScrollbar();
        that.$element.trigger('hidden.bs.modal');
      });
    };
})($.fn.modal.Constructor);