angular ui modal bootstrap sass not showing overlay or not visible overlay

Question

I'm using a modal angular ui all it's ok but the overlay it's not visible or too fade.

I'm using bootstrap sass and I've tried with:

$modal-backdrop-bg: red !default;
$modal-backdrop-opacity : 0.5 !default;

with no lucky

My goal is show my nice modal with a dark overlay :)

Answer 1

try to override the bootstrap modal class with this

.modal-backdrop {
  position:absolute !important;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000;
  opacity: 0.6;
}

I also added this class for centering it

.modal-center{
    position: fixed;
    top: 30%;
    left: 18.5%;
    z-index: 1050;
    width: 80%;
    height: 80%;
    margin-left: -10%;
}

this is the template I'm using:

<div class="modal-header">
            <button type="button" ng-click="cancel()" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">some title</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a class="hand-cursor" ng-click="ok($index)">{{ item.label }}</a>
                </li>
            </ul>
            <p class="text-center">
                Selected: <b>{{ selected.item.label }}</b>
            </p>
        </div>
        <div class="modal-footer">
        </div>

and this is the code for the $modal instance

var modalInstance = $modal.open({
    templateUrl: 'sometemplate.tpl.html',
    controller: 'ModalInstanceController',
    windowClass:'modal-center modal fade in',
    resolve: {
        items: function () {
            scope.items = ModelerMenusource; // <-- a simple array with the list of items
            return scope.items;
            }
        }
    });

Answer 2

I think I've encountered the very same problem.

Eventually I decided to use the version it was tested against.

Try using 3.1.1. :)