This is working fine on the desktop size screen but when the screen size is smaller than 768px and I click in any Image the Modal shows in the centre of the screen. You can see this behaviour by opening [tweakball](www.tweakball.com) all wallpapers navgation on mobile screen
I want the modal to be shown exactly at that point of website where the image is clicked
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #373737 !important;
}
.modal-container {
position: relative !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #373737;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}
.modal-dialog {
margin: 20px auto 0;
width: 100% !important;
height: 100% !important;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
align-self: center;
background-color: transparent;
border: none;
margin: 0;
position: absolute !important;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal-body-container {
width: 80%;
max-height: 80vh;
background-color: black;
display: flex;
justify-content: center;
/* Center horizontally */
border-radius: 10px;
overflow: hidden;
}
.modal-body img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
margin: 0 auto;
display: block;
border-radius: 10px;
}
.btn-primary {
background-color: #ffc107;
border-color: #ffc107;
color: #000;
padding: 10px 20px;
border-radius: 5px;
margin-right: 10px;
border-bottom: none;
text-decoration: none;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #ffcd38;
border-color: #ffcd38;
color: #000;
}
body.modal-open {
overflow: visible;
position: relative;
}
.btn-secondary {
background-color: #007bff;
border-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
.btn-secondary:hover,
.btn-secondary:focus {
background-color: #0056b3;
border-color: #0056b3;
color: #fff;
}
.modal-footer {
align-self: center;
text-align: left;
border-top: none;
}
.modal-footer .btn {
margin-right: 10px;
}
}
</style>
</head>
<body>
<!-- Your existing gallery code here -->
<!-- Container for modal background -->
<div class="modal-container">
<!-- Modal HTML -->
<div id="imageModal" class="modal fade" tabindex="-1" role="dialog">
<div class=" d-flex flex-column modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body-container">
<img id="modalImage" src="" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a id="downloadLink" href="javascript" download="image" class="btn btn-primary">Download</a>
</div>
</div>
</div>
</div>
</div>
<!-- Your existing script code here -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.elementor-gallery-item').each(function() {
$(this).on('click', function(e) {
e.preventDefault();
var imageUrl = $(this).attr('href');
$('#modalImage').attr('src', imageUrl);
$('#downloadLink').attr('href', imageUrl);
var imagePosition = $(this).offset();
var imageTop = imagePosition.top;
var imageLeft = imagePosition.left;
$('#modalImage').css({
'top': imageTop + 'px',
'left': imageLeft + 'px'
});
$('#imageModal').modal('show');
$('.modal-container').show(); // Show the modal background container
// window.scrollTo(0, 0);
});
});
// Close the modal and hide the background container
$('#imageModal').on('hidden.bs.modal', function(e) {
$('.modal-container').hide();
});
});
jQuery(document).ready(function($) {
// Your existing script code
// Adjust z-index dynamically when modal is shown
$('#imageModal').on('shown.bs.modal', function() {
// Ensure backdrop and modal are siblings
$(this).before($('.modal-backdrop'));
// Set z-index of modal greater than backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
});
</script>
</body>
</html>