I'm using this modal service to show a basic dialog in an Angular app.
The implementation is simple but there are two issues:
- The dialog shows but the modal-backdrop class is repeated multiple times, rendering it completely black.
- When closing the dialog, the form closes but the background remains, leaving the view useless. I'm sure this is related to 1.
I'm using Angular 1.4.9 with angular-ui-bootstrap 0.13.4 [2015-09-03]. I've found a couple of posts showing incompatibilities between angular 1.4 and angular-ui-bootstrap but I've not managed to solve this.
Edit - view and controller code:
<button type="button" class="btn btn-sm btn-white" ng-click="procFileCtrl.viewErrors(file)"> <i class="fa fa-eye"></i> </button>
this.viewErrors = function(file) {
ModalService.showModal({
templateUrl: 'modules/components/client/modal/modal-base.html',
controller: 'FileController',
controllerAs: 'fileCtrl',
inputs: {
data: file
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
this.message = result ? 'ok' : 'notok';
});
}).catch(function(error) {
console.log(error);
});
};
modal-base.html
<div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<!-- header here -->
</div>
<div class="modal-body">
<!-- body here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>