Модальное окно остается в фоновом режиме (ngx-модальное)

Question

Я пытаюсь реализовать модальное окно с помощью ngx-модуля, но когда оно открыто, оно остается в фоновом режиме и экран отключен.

Вот мой код:

<button md-raised-button color="primary" class="text-upper" (click)="firstModal.open()">Proveedor</button>
<modal #firstModal>
    <modal-header>
        <h1>I am first modal</h1>
    </modal-header>
    <modal-content>
        This modal has its own header, content and footer.
    </modal-content>
    <modal-footer>
        <button class="btn btn-primary" click="firstModal.close()">okay!</button>
    </modal-footer>
</modal>
<button md-raised-button color="primary" class="text-upper">Marca</button>
</div>

Образ

С непрозрачностью:0

Благодарю.

Answer 1

Вы должны использовать opacity:0 CSS свойство, как показано ниже

import {ModalModule} from "ngx-modal";
@Component({
  selector: 'my-app',
  template: `
    <div [class.disable]="disable">
      <h2>Hello {{name}}</h2>
      <div class="row container-fluid">
      <img height="400" src="http://lorempixel.com/400/200"/><br><br>
    <button (click)="openClicked()"> open my modal</button>
    <br/><br/><br/><br/><br/><br/>

     </div>
</div>
    <modal #myModal>
        <modal-header>
            <h1>Modal header</h1>
        </modal-header>
        <modal-content>
            Hello Modal!
        </modal-content>
        <modal-footer>
            <button class="btn btn-primary" (click)="closeClicked()">close</button>
        </modal-footer>
    </modal>


  `,
})
export class App {
  @ViewChild('myModal') myModal;
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
  openClicked(){
    this.disable=true;
    this.myModal.open();
  }
  closeClicked(){
    this.disable=false;
    this.myModal.close();
  }
}

LIVE DEMO