CSS issue for Loader and Modal Windows

[LiamParticipant]

Hello, few time ago I had a problem with jqxLoader.
jqxLoader didn’t cover modal jqxWindows. In this thread you recommended me to use the following CSS which works fine :

CSS

.jqx-loader {
  z-index: 102 !important;
}

.jqx-loader-modal {
  z-index: 101 !important;
}

.jqx-window {
  z-index: 100 !important;
}

.jqx-window-modal {
  z-index: 99 !important;
}

But this CSS cause another problem. When I open a dialog window from another dialog window, I can still interact with both dialog windows. The first dialog window should be disabled, but it still active. Screenshot

Reproduction :

app.component.ts

@Component({
  selector: 'app-root',
  template: '
    <app-modal-window1 #modalWindow1></app-modal-window1>
    <input type="button" value="Open Modal 1" (click)="modalWindow1.open()"/>
  '
})

export class AppComponent {
}

modalwindow1.component.ts

@Component({
  selector: 'app-modal-window1',
  template: '
    <app-modal-window2 #modalWindow2></app-modal-window2>

    <jqxWindow #thisWindow [width]="640" height="480" [autoOpen]="false" [isModal]="true">
      <div>Window1</div>
      <div>
        Modal Window 1
        <input type="button" value="Open Modal 2" (click)="modalWindow2.open()">
      </div>
    </jqxWindow>
  '
})
export class ModalWindow1Component {
  @ViewChild('thisWindow') thisWindow: jqxWindowComponent;

  open() {
    this.thisWindow.open();
  }
}

modalwindow2.component.ts

@Component({
  selector: 'app-modal-window2',
  template: '
    <jqxWindow #thisWindow [width]="320" height="200" [autoOpen]="false" [isModal]="true">
      <div>Modal Window 2</div>
      <div>
        Modal Window 2
      </div>
    </jqxWindow>
  '
})
export class ModalWindow2Component {
  @ViewChild('thisWindow') thisWindow: jqxWindowComponent;

  open() {
    this.thisWindow.open();
  }
}

styles.css

.jqx-loader {
  z-index: 102 !important;
}

.jqx-loader-modal {
  z-index: 101 !important;
}

.jqx-window {
  z-index: 100 !important;
}

.jqx-window-modal {
  z-index: 99 !important;
}

How can it be fixed ?
Thank you !

[MartinParticipant]

Hello Liam,

I tried running your code and reproduced the issue that you are describing.
Removing the css fixes the issue. Can you provide an example which includes the loader, because there is no need of the css without it?
Or you can try to set a different class to the second window and change you css according to it.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[LiamParticipant]

Hello, Martin.

In this thread Stanislav recommended me to use that CSS because loader is not covering modal dialog window and I can interact with that window ( it must be disabled ). For example :

app.component.ts

@Component({
  selector: 'app-root',
  template: '
    <jqxLoader #jqxLoader></jqxLoader>
    
    <jqxWindow #thisWindow [width]="320" height="200" [autoOpen]="true" [isModal]="true">
      <div>Modal Window</div>
      <div>
        <input type="button" value="Open Loader" (click)="jqxLoader.open()"/>
      </div>
    </jqxWindow>
  '
})

export class AppComponent {
}

What CSS should I use to make it work in both cases ?
( 1 -> to cover modal dialog windows with jqxLoader; 2 -> to open dialog window from another dialog window properly )

Thank you !

[MartinParticipant]

Hello Liam,

Can you trying the following code:

app.component.ts

@Component({
    selector: 'app-root',
    template: '

<jqxLoader #jqxLoader [isModal]="true"></jqxLoader>
    <app-modal-window1 #modalWindow1></app-modal-window1>
    <jqxWindow class="main-window" #thisWindow [width]="320" height="200" [autoOpen]="true" [isModal]="true">
        <div>Modal Window</div>
        <div>
            <input type="button" value="Open Loader" (click)="openLoader()" />
            <input type="button" value="Open Modal1" (click)="modalWindow1.open()" />
        </div>

    </jqxWindow>'

})

export class AppComponent {
    @ViewChild('jqxLoader') jqxLoader :jqxLoaderComponent

    openLoader = () => {
        this.jqxLoader.open();
    }
}

modal-window1.component.ts

@Component({
  selector: 'app-modal-window1',
    template: '

<app-modal-window2 #modalWindow2></app-modal-window2>

<jqxWindow class="window1" #thisWindow [width]="200" [height]="200" [autoOpen]="false" [isModal]="true">
    <div>Window1</div>
    <div>
        Modal Window 1
        <input type="button" value="Open Modal 2" (click)="modalWindow2.open()">
    </div>
</jqxWindow>
'
})
export class ModalWindow1Component {

    @ViewChild('thisWindow') thisWindow: jqxWindowComponent;

    open() {
        this.thisWindow.open();
    }

}

modal-window2.component.ts

@Component({
  selector: 'app-modal-window2',
    template: '

<jqxWindow #thisWindow [width]="320" height="200" [autoOpen]="false" [isModal]="true">
    <div>Modal Window 2</div>
    <div>
        Modal Window 2
    </div>
</jqxWindow>'
})
export class ModalWindow2Component {

    @ViewChild('thisWindow') thisWindow: jqxWindowComponent;

    open() {
        this.thisWindow.open();
    }

}

styles.css

.window1 {
    z-index: 105 !important;
}

.window1 + .jqx-window-modal {
    z-index: 104 !important;
}

.jqx-laoder {
    z-index: 103 !important;
}

.jqx-loader-modal {
    z-index: 102 !important;
}

.main-window {
    z-index: 101 !important;
}

.main-window + .jqx-window-modal {
    z-index: 100 !important;
}

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[LiamParticipant]

Hello, Martin.
Thank you for example. It works except one thing. If I open a loader from the first or second modal window, it still not covering modal windows.
You can use your previous example to reproduce, just replace the code of modal-window1.component.ts with the following code and then press “Open loader” button from the first modal window.

modal-window1.component.ts

@Component({
  selector: 'app-modal-window1',
  template: '

    <jqxLoader #jqxLoader [isModal]="true"></jqxLoader>

    <app-modal-window2 #modalWindow2></app-modal-window2>

    <jqxWindow class="window1" #thisWindow [width]="200" [height]="200" [autoOpen]="false" [isModal]="true">
      <div>Window1</div>
      <div>
        Modal Window 1
        <input type="button" value="Open Modal 2" (click)="modalWindow2.open()">
        <br/><br/><br/>
        <input type="button" (click)="jqxLoader.open()" value="Open loader"/>
      </div>
    </jqxWindow>
  '
})
export class ModalWindow1Component {

  @ViewChild('thisWindow') thisWindow: jqxWindowComponent;

  open() {
    this.thisWindow.open();
  }
}

Thank you !

[MartinParticipant]

Hello Liam,

Then you should change the z-index of .jqx-loader-modal and .jqx-loader to be the largest, so they appear on the top when opened:

.jqx-loader {
    z-index: 107 !important;
}

.jqx-loader-modal {
    z-index: 106 !important;
}

.window1 {
    z-index: 105 !important;
}

.window1 + .jqx-window-modal {
    z-index: 104 !important;
}

.main-window {
    z-index: 101 !important;
}

.main-window + .jqx-window-modal {
    z-index: 100 !important;
}

And if you need to have a loader on window2 then you should set the z-indexes also for the window. Like this:

.jqx-loader {
    z-index: 111 !important;
}

.jqx-loader-modal {
    z-index: 110 !important;
}

.window2 {
    z-index: 107 !important;
}

.window2 + .jqx-window-modal {
    z-index: 106 !important;
}

.window1 {
    z-index: 105 !important;
}

.window1 + .jqx-window-modal {
    z-index: 104 !important;
}

.main-window {
    z-index: 101 !important;
}

.main-window + .jqx-window-modal {
    z-index: 100 !important;
}

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[LiamParticipant]

Hello, Martin.
It works !
Thank you !

[Author]

Posts