I created a modal that uses the following function to center itself:
center: function() {
var top=Math.max($window.height() - $modal.outerHeight(),0) / 2;
var left=Math.max($window.width() - $modal.outerWidth(),0) / 2;
$modal.css({
top: top + $window.scrollTop(),
left: left + $window.scrollLeft()
});
}
While this setup works well on desktop and mobile devices without zoom, it poses an issue when users zoom in on their screens. In such cases, the function miscalculates the position and the modal appears outside the viewport.
Is there a solution to ensure this function properly centers the modal even on zoomed-in mobile devices? Alternatively, I would be open to detecting a mobile device and displaying the modal within the zoomed part of the viewport to ensure visibility.
If anyone has insights or suggestions on how to address this challenge, your help would be greatly appreciated as I'm currently unable to make progress.