angular bootstrap modal disable backdrop

Question

How does one disable the backdrop in the angular bootstrap modal backdrop?

I've tried css hiding the outer container of the modal:

.modal {
     display: none; 
}

but that ends up hiding the modal itself. even if i override the actual modal.

My problem is i need to be able to click and interact with the text on the fg while in the modal. E.g. i want to drag an item inside the bootstrap modal and into the foreground outside the angular bootstrap modal.

Anyone have any ideas?

I'm using the standard angular bootstrap modal markup:

<ui-tabset>
    <ui-tab>Tab 1</ui-tab>
    <ui-tab>Tab 2</ui-tab>
</ui-tabset>

Answer 1

There is a backdrop parameter when instantiating the modal:

var modalInstance = $uibModal.open({
    backdrop: false,
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    resolve: { ... }
}

---

In addition, the backdrop can be given a class with the backdropClass parameter, which you could then override the fault css if backdrop: false wasn't enough for your needs.

The default backdrop class is modal-backdrop which takes the whole window with:

top: 0;
right: 0;
bottom: 0;
left: 0;

The modal class has the same styling applied which effects the position on the page as well as interaction with non-modal elements.