Modal not showing correctly when i put it into a Directive

Question

I can't reproduce the AngularStrap's example, here a working plunk

What I get when I integrate this example in my code:

enter image description here (As you can see it's a bit darker, i don't know why...)

What I'm expecting:

enter image description here

Actually I spent a whole day looking for solution for this but no luck.

guest.html

<body ng-app="module.app">
    <div class="container-fluid">
        <nav class="navbar navbar-inverse  navbar-static-top">
            <div topbar></div>
        </nav>  

        <div class="row">
             <div ui-view></div>
        </div>  
    </div>
</body>

topBar directive.js :

topBarModule.directive('topbar', function() {

    return {
          restrict: 'EAC',
          templateUrl: 'app/shared/topBar/topBar.html',
          controller: 'TopBarController'
          //ad controller for more controll logged user etc....
    };
});

topBar.html:

<div class="container-fluid">
    ...
   <div class="collapse navbar-collapse">

      <button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
                              <br>
      <small>(using an object)</small>
      </button>

   </div>
   ...
</div>

topBarController.js:

var topBarModule = angular.module('module.topBar', ['ui.router','mgcrea.ngStrap','ngAnimate','ngSanitize']);

topBarModule.controller('TopBarController', function($cookieStore,$scope,Session,Department,Auth,$window,$modal,$rootScope) {

    //..
    $rootScope.modal = {title: 'Title', content: 'Hello Modal<br />This is a multiline message!'};

});

I can't see where's the problem, can anyone tell me what's wrong?

I don't know what z-index means, but i'll try it, thanks for suggestion! — Marwen Trabelsi, Apr 17 '15 at 08:47
i'm into this now, this is a related question: http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background — Marwen Trabelsi, Apr 17 '15 at 08:50

score 0 · Accepted Answer · edited May 23 '17 at 11:57

I found it, using @dhaval suggestion

The problem is - As mentioned here - that the parent element have a fixed or relative position this behavior will occur..

So just deleted the navbar-static-top attribute and it's work now:

<body ng-app="module.app">
    <div class="container-fluid">

    <!-- <nav class="navbar navbar-inverse  navbar-static-top"> -->
        <nav class="navbar navbar-inverse">
            <div topbar></div>
        </nav>  

        <div class="row">
             <div ui-view></div>
        </div>  
    </div>
</body>

Modal not showing correctly when i put it into a Directive

What I get when I integrate this example in my code:

What I'm expecting:

1 Answers1

Linked