Modal window stay in the background (ngx-modal)

Question

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.

Hi, thanks for the answer. I have not error in the log, only warnings. — Leonardo, Apr 12 '17 at 20:50

score 0 · Accepted Answer · answered Apr 12 '17 at 20:14

0

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

answered Apr 12 '17 at 20:14

Aravind

40,391
16
91
110

Thanks for the help @Aravind. I did what you told, it seems the modal is in the front, but for any reason dosnt work. The page stay disable when open the modal. – Leonardo Apr 12 '17 at 21:07
@Leonardo you want the modal to be disabled? – Aravind Apr 12 '17 at 21:16
@arvind i added and image with the result. after i open the modal i cant interact anymore with the page and i only have to refresh the page. – Leonardo Apr 12 '17 at 21:22
what is that you need actually. be clear and specific. – Aravind Apr 12 '17 at 21:24
I need the modal to be in front of everything. currently i cant interact with them. – Leonardo Apr 12 '17 at 21:39
Implemented it in my demo. did you see it? – Aravind Apr 12 '17 at 21:46
Yes, but my modal is behind the backdrop and i cant edit them. – Leonardo Apr 12 '17 at 22:21
`Yes, but my modal is behind the backdrop and i cant edit them` you want this or you r facing this issue – Aravind Apr 12 '17 at 22:28
I can solve de problem adding .modal-backdrop { display: none; } in my global stylesheet. Thanks. i explain all so bad, sorry. – Leonardo Apr 12 '17 at 22:54
i have less than 15 reputaion, the upvote does not look. – Leonardo Apr 13 '17 at 04:41
answer a question you will get – Aravind Apr 13 '17 at 04:47

Modal window stay in the background (ngx-modal)

1 Answers1