modal window showing within a section when it should show on entire window

Question

Issue:

As seen in image

dark portion of modal window is covering only services.

Result:

I need that it cover entire window as similar to image below.

LATEST UPDATE In css, change from

  width: 100%;   
  height: 100%;

to

  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */

gives below output which is still not like the image above ( required )

EDIT:

I know that html, js css code can be tested on jsfiddle but I don't know how to recreate this exact problem with so many divs, as I tried but failed. While, I will try it again, if you have already some idea please throw some light on what changes to bring in to achieve the Result

If i may ask, How does the code work. i.e, is the modal dialog limited by the div's it is being called from or is it limited by the css that renders it ?

CONTEXT: In jekyll , index.html -> home.html -> base.html -> body-wrapper.html -> (buying.html, selling.html, leasing.html etc ...)

body-wrapper.html

.
.
<section class="lui-section lui-gradient-bottom" id="services-section">
.
.
    <div class="v-line v-line-right">
    <div class="container">
        <div class="swiper-container js-services scrolla-element-anim-1 scroll-animate" data-animate="active">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                {% include buying.html %}
            </div>

            <div class="swiper-slide">
                {% include selling.html %}
            </div>

        .
        .
        </div>
        <div class="swiper-pagination"></div>
        </div>
            <div class="lui-bgtitle">
                <span> Services </span>
            </div>
        </div>
    </div>

</section>

buying.html

<div class="modal-body">
    <a href="#buyModal" class="open-modal" data-modal="buyModal">
        <div class="services-item">
            <div class="lui-subtitle">
                <span>Buying</span>
            </div>
            <div class="lui-text">
                <div>
                    <p>First, I will help you obtain a pre-approval document from a reliable, re....sive l...w ...click here</p>
                </div>
            </div>
            <div class="image" style="background-image: url(assets/images/pat-2.png);"></div>

        </div>
    </a>
</div>
{% include modal.html modal-name='buyModal' modal-data='This is a simple modal popup example in Jekyll' %}

modal.html

<!-- The Modal-->
<div id="{{ include.modal-name }}" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-modal="{{ include.modal-name }}">&times;</span>
    <h2>Modal Header</h2>
    <p>{{ include.modal-data }}</p>
  </div>
</div>

modal-videos.css

/* Modal styles */

/* Modal background */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9990 !important; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.5s;
}


/* Modal Content */
.modal-content {
  background: white !important; /* Ensures modal is white */
  z-index: 9999 !important; /* Sit on top */
  border-radius: 8px;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  animation: slideIn 0.5s;
}

/* Close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide in animation */
@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

modal-videos.js

// Open modal functionality
document.querySelectorAll('.open-modal').forEach((button) => {
  button.addEventListener('click', (event) => {
    event.preventDefault(); // Prevent default link behavior
    const modalId = button.getAttribute('data-modal');
    const modal = document.getElementById(modalId);
    modal.style.display = 'block';
  });
});

// Close modal functionality
document.querySelectorAll('.close').forEach((button) => {
  button.addEventListener('click', () => {
    const modalId = button.getAttribute('data-modal');
    const modal = document.getElementById(modalId);
    modal.style.display = 'none';
  });
});

// Close modal when clicking outside of it
window.addEventListener('click', (event) => {
  document.querySelectorAll('.modal').forEach((modal) => {
    if (event.target === modal) {
      modal.style.display = 'none';
    }
  });
});