i'm trying implement a window modal with ngx-module but when open de window it stay in backgroun and the screen is disabled.
Here is my code:
<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>
Thanks.
You should be using opacity:0
css property as below
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();
}
}