Struggling to implement a modal that appears upon clicking a div, but encountering a frustrating freeze on the screen that leaves me unable to interact with anything. I've checked out this related query at Bootstrap Modal popping up but has a "tinted" page and can't interact, yet the issue persists.
I attempted relocating the modal just before the closing tag based on the suggestions in the above-mentioned question, however, the problem remains unresolved.
<div class="card-container">
<article class="card">
<div class="card-img-container" >
<img class="card-img" src="https://images.unsplash.com/photo-1473186505569-9c61870c11f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
</div>
<div class="card_content" (click)="loadModal(content)">
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Howdy!</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
</div>
<div class="modal-body">
<p>Greetings, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
</div>
</ng-template>
</div>
</article>
</div>Above showcases my component.html code
.card-container {
margin-left: 15vh;
margin-top: 70vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
row-gap: 40px;
column-gap: 60px;
}
.card {
position: relative;
width: 280px;
height: 250px;
color: #2e2d31;
background: #131313;
overflow: hidden;
border-radius: 10px;
}
/* CSS styles continued... */Above depicts my component.css code
// TypeScript component functionality...Above outlines my component.ts code
Screenshots: https://i.sstatic.net/Lnxjb.png
Upon interacting with the card content as seen in the screenshots below, the issue unfolds: https://i.sstatic.net/flkcO.png
The occurrence results in a frozen state, prompting a site refresh for restoration.
Efforts involving setting z-index:0 for modal-backdrop proved ineffective in resolving the glitch.
Any assistance in rectifying this matter would be greatly appreciated. Thank you!
Edit: https://i.sstatic.net/A5Ear.png
Despite experimenting with z-index: unset, the freezing issue still persists. Seeking guidance on entirely removing the property from the code for resolution.