模態窗口留在後臺（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> 

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