taking entire window space

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



<div class=“modal-backdrop fade”></div> taking entire window space



The HTML of my Angular application has a modal box which pops on application start up.


Angular


<div >
<div class="css-grid-container" *ngIf="!loading">
<app-nav-component></app-nav-component>
<app-content-component></app-content-component>

<app-footer-component></app-footer-component>
</div>
<app-progress-bar></app-progress-bar>

<app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [dialogContext]=""></app-dialog-box>
</div>



app-dialog-box is an Angular component and it shows/hides Bootstrap's modal using javascript API modal('show') and modal('hide').


app-dialog-box


Angular


Bootstrap


modal('show')


modal('hide')


<div #modal class="modal fade" tabindex="-1" role="dialog" id=dialogID>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">CodingJedi</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dialogHide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>dialogMessage</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="dialogHide()">Close</button>
</div>
</div>
</div>
</div>



Code to show and hide the modal


$(this.dialogRef.nativeElement).modal('show');



and


$(this.dialogRef.nativeElement).modal('hide');



My issue is that Bootstrap seem to add <div class="modal-backdrop fade"></div> in the html which takes up the entire page and makes other components unclickable. See the pic below. You'll notice that the div takes the entire space even when the modal is not visible because after clicking close on the modal, it is hidden using $(this.dialogRef.nativeElement).modal('hide');


Bootstrap


<div class="modal-backdrop fade"></div>


div


close


$(this.dialogRef.nativeElement).modal('hide');



enter image description here



What could I do to solve my issue?









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS