angularngx-modal

Modal window stay in the background (ngx-modal)


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>

Image

With opacity:0

Thanks.


Solution

  • 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();
      }
    }
    

    LIVE DEMO