Ngx-bootstrap: Trigger Modal using Routing

[Ferhatos]

Hello,

I'm getting a similar issue. The modal is opened but no accessible area. All the screen is darker and disabled.
I used example from : API documentation. All examples give the same issue.
My page is a 3td level route (appRoot->Dashboard->BlankPage).

Error

[valorkin]

can you please, create repoplunker so I can reproduce
modals logic changed a bit
but looks like some kind of race condition

[calvinKG]

With UI Router angularJS(1) you can open(Trigger) modal using routing.
That's what we want to achieve.

`angular.module("modalApp", ["ui.router"]).config(function($stateProvider) {
$stateProvider.state("Modal", {
views:{
"modal": {
templateUrl: "modal.html"
}
},
abstract: true
});

$stateProvider.state("Modal.confirmAddToCart", {
views:{
"modal": {
templateUrl: "modals/confirm.html"
}
}
});
});`

https://www.sitepoint.com/creating-stateful-modals-angularjs-angular-ui-router/

[Richard87]

Hi!

Is it possible to use the static bootstrap modal, and just load it in a named routeroutlet whenever I want to display it?

<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

[davidstellini]

@Richard87 Late reply but for everyone else, as far as I know no, you'd need to use Dynamic Component Loader

[anshake]

Had similar issue.
It was a problem with my html (one of those free bootstrap admin templates) messing up with z-index.
So the fix was simply to carefully review/change/remove z-index in css.

bs-modal-backdrop has default z-index 1040, and modal div has z-index 1050 (so should be above modal backdrop). Also note that backdrop is attached to the body element. And modal content div is somewhere inside, being a child of a container which has z-index 2 (which was my case), it becomes below backdrop, so that's why modal content div is not accessible.

In short: just check z-index of a container which encloses your <route-outlet>

[anshake]

@valorkin it would have been great if there was an option allowing to choose where to append the modal to (same way as it is done in angular-ui via appendTo)

[valorkin]

starting from v1.8 you can use modal service for it
ps: modal appends to body
http://valor-software.com/ngx-bootstrap/#/modals#service-component