Modal window has large background

Question

I am using the iu.bootstrap.modal popup window on one of my views. The modal windows displays correctly except that it looks like it is inside a larger white frame.

What is causing this white frame to appear behind my modal window?

Here is my view:

<button type="button" id="btnModal" name="modal1" ng-click="openModal()" class="btn btn-primary pull-right">Open Modal</button>

<!--Modal-->
<script type="text/ng-template" id="myModal.html">
<div class="modal-content">
<div class="modal-header">
    <h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
    <span id="error-message" class="text-danger" style="white-space:pre">{{message}}</span>
</div>
<div class="modal-footer">
    <button id="btn-ok" class="btn btn-primary" type="button" ng-click="ok()">OK</button>
</div>
</div>    
</script>

And my controller

  $scope.openModal = function () {
  var title = "Modal Title";
  var message = "Modal Message";

  var modalInstance = $uibModal.open ({
      animation: true,
      templateUrl: 'myModal.html',
      size: 'sm',
      controller: function ($scope) {
        $scope.title = title;
        $scope.message = message;
        $scope.ok = function () { modalInstance.dismiss() };
    }
  });
};

What causes the window to appear behind the modal?

I think some of your CSS overriding bootstrap CSS. Check if 'modal-backdrop' class has this style background-color: #000; . Provide a plunkr or jsfiddle for better understanding. — Sourav Mondal, Nov 11 '16 at 13:53
You are correct. There was an css that was causing the problem. I commented it out in index.html and now the modal appears correctly. — Jerry, Nov 11 '16 at 14:55

score 3 · Answer 1 · answered Nov 11 '16 at 13:57

In ui.bootstrap documentation (https://angular-ui.github.io/bootstrap/#/modal)

<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body" id="modal-body">
            <ul>
                <li ng-repeat="item in $ctrl.items">
                    <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ $ctrl.selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
        </div>
    </script>

There is not a <div> of modal-content class. But you have at the beginning of the modal. The modal-content is a css Bootstrap class and it may cause the problem.

Modal window has large background

1 Answers1