I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz)
div.cover {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 200;
}
div.modal {
background-color: white;
display: flex;
flex-direction: column;
max-height: 60vh;
max-width: 400px;
width: 100%;
}
div.head {
align-items: center;
background-color: white;
border-bottom: 1px solid gray;
display: flex;
flex-shrink: 0;
height: 50px;
justify-content: space-between;
padding: 0 20px;
}
div.body {
background-color: white;
flex-grow: 1;
overflow: auto;
}
div.view {
padding: 20px 28px;
}
div.foot {
align-items: center;
background-color: white;
border-top: 1px solid gray;
display: flex;
flex-shrink: 0;
height: 50px;
justify-content: flex-end;
padding: 0 20px;
}
p {
margin: 0;
padding: 0;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
<div class="modal">
<div class="head">
<div>Head</div>
<div><a href="#">Close</a></div>
</div>
<div class="body">
<div class="view">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>
Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
</div>
</div>
<div class="foot">
Foot
</div>
</div>
</div>Subsequently, I utilized a Modal.Service to open the content (Access it on StackBlitz)
Upon clicking "Open Modal", the modal displays as expected.
However, an issue arises when resizing the browser window height as the modal does not adjust accordingly.
Any thoughts on what may be causing this problem?