Darken screen when modal pops up - html

Question

I'm trying to darken the rest of my screen when my modal pops up. I got the code from here: https://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box
What ends up happening is my entire screen goes dark and opaque even before I open the module.
I'm not sure if there is something I'm doing wrong in the CSS or if there is a mistake in the HTML
Here is my code:
....
/* MODAL STYLES
-------------------------------*/
.closed{
display:none;
}
.modal {
/* modal container fixed across whole screen */
background: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
/* z-index must be higher than .modal-background */
z-index: 1000;
/* enables scrolling for tall modals */
overflow: auto;
.modal-body {
padding: 20px;
background: #fff;
/* margin exposes part of the modal background */
margin: 40px;
}
.modal-header{
padding: 20px;
background: #fff;
/* margin exposes part of the modal background */
margin: 40px;
}
}
.modal-background {
/* modal background fixed across whole screen */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* semi-transparent black */
background-color: #000;
opacity: 0.75;
/* z-index must be below .modal and above everything else */
z-index: 1;
}
body.modal-open {
/* body overflow is hidden to hide main scrollbar when modal window is open */
overflow: hidden;
}
....
HTML:
<modal id="custom-modal-2" >
<div class="modal" style="height:100px; width: 100px;">
<div class="modal-body">
<h1 >A Custom Modal!</h1>
<p>
Home page text: <input type="text" [(ngModel)]="bodyText" />
</p>
<button (click)="closeModal('custom-modal-2');">Close</button>
</div>
</div>
<div class="modal-background"></div>
</modal>

Answer 1

So your modal is set to be displayed automatically and so you are displaying the whole thing once it is added to your page. You can add the "closed" class to your modal as a default, then have the open and close button change that value.
One thing you may want to consider, if you aren't already doing it, is having the modal with a state of isOpen, and then have that be the trigger for whether or not it is displaying the modal. The reason I would suggest this is because that way the logic is based on something you can see in the Javascript itself and control that with {{isOpen}} rather than adding and removing a class.