Modal not rendering template in multiple tabs

[NadeemAfana]

IMPORTANT: I could not reproduce the issue using plnkr, so I attached a small zip file ngx-modialog-demo.zip

• I'm submitting a bug

• Do you want to request a feature or report a bug?
  Report a bug.

• What is the current behavior?
  If I open a modal in two more more tabs from a BroadcastChannel onMessage event, only one of the modals is opened and the rest of the tabs have a thin line (ie the modal template is not rendered). The modal html looks like the following
  

<modal-overlay style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 1500;">
   <div>
      <!---->
      <css-backdrop class="modal-backdrop fade show"></css-backdrop>
      <bs-modal-container class="modal fade show" role="dialog" style="position: absolute; display: block" tabindex="-1">
         <div class="modal-dialog modal-lg" ng-reflect-ng-class="modal-dialog">
            <div class="modal-content" overlaydialogboundary="" role="document" style="display:block">
               <!----> <!---->
            </div>
         </div>
      </bs-modal-container>
   </div>
   <!---->
</modal-overlay>

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via

1. Open ngx-modialog-demo.zip. Or choose any component in an existing app and use the following code

export class AppComponent implements OnInit, OnDestroy {
  title = 'ngx-modialog-demo';
  broadCastChannel: BroadcastChannel;

  constructor(public modal: Modal) { }

  ngOnDestroy(): void {
    this.broadCastChannel.close();
  }
  ngOnInit(): void {
    this.broadCastChannel = new BroadcastChannel('ngx-modialog-demo');
    this.broadCastChannel.onmessage = ((_ev: MessageEvent) => {
      const dialogRef = this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('A simple Alert style modal window')
        .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
        .open();
      dialogRef.result.then(result => { });
    });

    setTimeout(() => {
      this.broadCastChannel.postMessage({});
    }, 2000);

  }
}

2. npm install (ie Restore modules)
3. Run the app (ng serve --port 1234) and open it in two or more tabs.

• What is the expected behavior?
  You should see the modal in all opened tabs 2 seconds after the tab is opened.

• What is the motivation / use case for changing the behavior?
  I expect the modal to be shown in all tabs instead of a thin line.

• Please tell us about your environment:

  • ng --version

  Angular CLI: 7.3.0
  Node: 8.12.0
  OS: win32 x64
  Angular: 7.2.3
  ... animations, common, compiler, compiler-cli, core, forms
  ... language-service, platform-browser, platform-browser-dynamic
  ... router
  
  Package                           Version
  -----------------------------------------------------------
  @angular-devkit/architect         0.13.0
  @angular-devkit/build-angular     0.13.0
  @angular-devkit/build-optimizer   0.13.0
  @angular-devkit/build-webpack     0.13.0
  @angular-devkit/core              7.3.0
  @angular-devkit/schematics        7.3.0
  @angular/cli                      7.3.0
  @ngtools/webpack                  7.3.0
  @schematics/angular               7.3.0
  @schematics/update                0.13.0
  rxjs                              6.3.3
  typescript                        3.2.2
  webpack                           4.29.0
  

NOTE: I was able to reproduce the issue in Angular 4.

• Browser: [Chrome XX | Firefox XX ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
  I could workaround this issue if I click anywhere on the overlay. So I put the following hack inside my components temporarily

   setTimeout(() => {
      // Fixes the modal not rendering issue.
       document.body.click()
    })