Question

我尝试使用ngx-module实现一个窗口模式但是当打开de window时它会保留在背景中并且屏幕被禁用。

这是我的代码：

<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>

Image

With opacity: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

模态窗口保留在后台（ngx-modal）

1 个答案: