feat(modals): add an options to append modals to element

[zl810881283]

I follow the modal doc, and find that I should do a small hack in the root component, which is need in my project. I wonder whether I can set modals to child component. what should I do?

import {Component, ViewContainerRef} from '@angular/core';

@Component({selector:'app-root'})
class AppRoot {
  public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
    this.viewContainerRef = viewContainerRef;
  }
}

[zl810881283]

I want to make it clear that both common modal and child modal open with the whole document (maybe ),but I want to it show based on a subelement (like a child div)

[Dinistro]

@zl810881283 This hack is needed, so that the modal_component can access the DOM of the app-root, to add a backdrop. But you can still add the modals in child-components, no worries.

[Dinistro]

@zl810881283 Sorry, I did not saw the second comment. So what do you mean with this:

show based on a subelement (like a child div)

[zl810881283]

@valorkin I want modal only show in #holder . do not dark the whole document

<div class="container">
  <div class="row">
    <div  class="col-md-4">
       some code...
    </div>
    <div  class="col-md-8" id="holder">
       some code...
       <div bsModal></div>
    </div>
  </div>
</div>

[valorkin]

@zl810881283 not yet implemented, but planned

[DethAriel]

@valorkin could you please clarify: is this issue about appending backdrop component to some given element? This is something I would like to have.

I was envisioning something like this maybe:

<div bsModal [config]="{ backdrop: boolean | 'static' | 'sibling' }">...</div>

[turnerguo]

Why not add a container property to support custom the target modal container?

<div bsModal [config]="{ container: <HTMLElement> }">...</div>

[valorkin]

@turnerguo more likely it will appear in modal service as target option

[cannontechnology]

I think ticket 2609 was more appropriate for the following issue but it was closed and pointed to this one.

My application needs to be VPAT complaint and one of the accessibility rules is that "All page content must be contained by landmarks". see https://dequeuniversity.com/rules/axe/3.1/region?application=AxeChrome

Currently the popover component can only be attached to the body via container="body". Could that be extended to append to any DOM element? If so, I could attach to a landmark instead and meet the requirement.

[sanchit315]

Hey @valorkin do we have any workaround for this now ?

[zl810881283]

已经收到您的来信，我会尽快回复。