@return response()
*/
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return with: ${reason};
}
}
}
9. ng s
10. open chrome
11. browse to "http://localhost:4200"
12. navigate to the component where the HTML was inserted
13. click the 'Open My Modal' button
14. the z-index of the modal-backdrop is 1055, which puts the backdrop in front of the modal.
<img width="2054" alt="Screen Shot 2022-05-02 at 3 08 46 PM" src="https://user-images.githubusercontent.com/17507370/166321426-b9234f2f-b3d3-4606-a727-2281a5d314b0.png">
using the browser console, changing the z-index to 1050 shows the proper display
What is expected?
the modal backdrop is positioned behind the modal content
What is actually happening?
the modal content is effectively disabled due to the z-index
Solution
I added the following to the _modals.scss, which fixes the ngb-modal issue, but it breaks the OOB Paper Dashboard modals on the components/notifications pages
.modal-backdrop {
z-index: 1050 !important;
}
Since this addition breaks the OOB modals, what is the better solution?
Version
1.5
Reproduction link
https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular
Operating System
Mac OS Monterey
Device
2021 Macbook Pro (M1 Pro Chipset)
Browser & Version
Chrome v. 101.0.4951.41
Steps to reproduce
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'appBootstrap';
closeResult: string = '';
/*------------------------------------------
Created constructor
--------------------------------------------*/ constructor(private modalService: NgbModal) {}
/**
@return response() */ open(content:any) { this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => { this.closeResult =
Closed with: ${result}
; }, (reason) => { this.closeResult =Dismissed ${this.getDismissReason(reason)}
; }); }/**
with: ${reason}
; } } }What is expected?
the modal backdrop is positioned behind the modal content
What is actually happening?
the modal content is effectively disabled due to the z-index
Solution
I added the following to the _modals.scss, which fixes the ngb-modal issue, but it breaks the OOB Paper Dashboard modals on the components/notifications pages
Since this addition breaks the OOB modals, what is the better solution?
Additional comments