1

I'm using this modal service to show a basic dialog in an Angular app.

The implementation is simple but there are two issues:

  1. The dialog shows but the modal-backdrop class is repeated multiple times, rendering it completely black.

enter image description here

  1. 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>

Community
  • 1
  • 1
ceebreenk
  • 1,031
  • 2
  • 14
  • 29

0 Answers0