#82 Modal-backdrop not removing with only 1 modal.

[Anonymous]

Originally created by: jrgleason

First I have confirmed that by HTML does not have multiple root elements. I have the following code...

app.controller('SampleModalController', function($scope, close, Restangular, graphService, d32) {
var _this = this
$scope.dismissModal = function(result) {
    close(result, 200); // close, but give 200ms for bootstrap to animate
};
this.types = [];
this.items = graphService.getGraph().nodes;
this.nodes = this.items.map(function(item, index, items){
    return item.title
});
this.onselect = function(selected){
    console.log("Selected");
    d32.recenter(selected);
    close();
}
Restangular.oneUrl('nodeType', '/node/types').get().then(function(data){
    _this.types = data.types;
})
});

Problem is when I call onselect the modal goes away but the backdrop stays. What am I missing?

[Anonymous]

Originally posted by: Shingwa

I have the same issue when I upgrade Bootstrap from v3.3.1 to v3.3.5.
It is fine when I use Bootstrap v3.3.1.

[Anonymous]

Originally posted by: moshie

+1

[Anonymous]

Originally posted by: SaintPeter

Same issue with Bootstrap v3.3.5.
With Bootstrap v3.3.1 I get the backdrop on TOP of my modal.

[Anonymous]

Originally posted by: SaintPeter

My workaround was to just manually remove the backdrop when the modal closed:

modal.close.then(function(result) {
            $('.modal-backdrop').remove();
}

[Anonymous]

Originally posted by: angelxmoreno

👍 @SaintPeter worked for me

[Anonymous]

Originally posted by: felipegr

@SaintPeter worked for me too, thanks!

[Anonymous]

Originally posted by: alexanderzeillinger

@SaintPeter 👍

[Anonymous]

Originally posted by: sufleR

+1

[Anonymous]

Originally posted by: infodark

I know that is issue is old, but it's necessary to share.
If you inject $element into your controller and use it like as code below is a better approach than execute a jquery method into controller:

$element.modal('hide');
close({}, delay);