Whenever the user clicks on the edit button or when the page is initially loading, a backdrop appears and disappears once the modal is displayed. The backdrop effectively highlights the entire page. However, after updating my table with data via Ajax without refreshing the page, I noticed that the backdrop only covers the top half of the screen instead of the whole page. When the page first loads, the backdrop covers the entire page:
After updating the table using Ajax and attempting to display the backdrop by editing a record, it looks like this:
How can I modify the code to ensure that the backdrop covers the whole page even when the table is updated? Code snippet below:
<div class="backdrop">
</div>
CSS:
.backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.5;
background-size: 100% 100%;
}
The backdrop is initially set to display as none and becomes visible when required.