I'm facing an issue with my modal image within a Bootstrap 4 carousel that uses JQuery. When I open the modal, it doesn't appear centered on the screen. Could you advise me on which parent div to style and how? Additionally, how can I ensure the image stays proportional and responsive on smaller screens?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="pop d-block" src="images/getonboard.png" alt="First slide">
</div>
<div>
<a class="carousel-control-prev" href="javascript:void(0) role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="javascript:void(0) role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Modal Images Link -->
<!-- Geton Modal -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div style="width: 800px; height: 500px;" class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-
hidden="true">×</span><span class="sr-only">Close</span>
</button>
<img src="images/getonboard.png" class="imagepreview" style="width:
100%;" >
</div>
</div>
</div>
</div>
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});