Presently, I am in the process of creating my own modal for the system. When you click on a package name, the modal pops up and is displayed. I have implemented some JQuery code that should remove the modal when clicking on the background. However, it also hides the modal when clicked directly on the modal itself.
I attempted to assign z-index 3 to the parent element and z-index 4 to the modal, but this approach did not solve the issue. How can I configure it so that clicking on the background makes the modal disappear, but clicking on the modal itself does nothing, allowing users to interact normally with the modal?
Here's a small illustration:
https://i.sstatic.net/mFEn1.gif
The popups are dynamically added to a parent container using Ajax (see below)
<div class="container-fluid pt-5 ">
<div class="row">
<div class="col-md-6">
<h3>{{ __('Packages') }}</h3>
</div>
</div>
<div class="row my-5">
<div class="col-md-4">
<div id="package-loading" class="text-center">
<i class="fas fa-spinner fa-pulse fa-2x color-primary"></i>
</div>
<p id="package-error" class="text-danger" style="display: none"></p>
<div id="packages-wrapper"></div>
</div>
</div>
</div>
<div class="popup-list">
</div>
<script>
// AJAX request for packages data and dynamic content generation goes here
</script>
HTML
SASS
.package-popup {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
overflow: hidden;
background-color: $primary_background_transparent;
z-index: 3;
.package-popup-dialog {
max-width: 960px;
position: relative;
margin: auto;
top: 100px;
background-color: $color-white;
border-radius: 16px;
padding: 3rem;
z-index: 4;
pointer-events: none;
.package-popup-content {
position: relative;
pointer-events: auto;
display: flex;
flex-direction: column;
}
}
}