As someone who is relatively new to web development and completely self-taught, I've encountered a challenge with an iframe on my page. I have a CSS and JavaScript popup that is triggered by jQuery. The desired behavior is that when a link is clicked, a popup window with a shaded background appears before transitioning to the next page. Below is the JavaScript code I am using:
$SearchListings.on("click", "a", function (e) {
e.preventDefault();
href = e.target.href;
itemnum = getItemNum(href);
var dataString = //urlhere
$.get(dataString, function (data) {
$linkShade.fadeIn();
$linkModal.html(data).delay(500).fadeIn();
Galleria.loadTheme('js/galleria.classic.min.js');
$('#galleria').galleria({ lightbox: true });
});
});
$linkShade.on("click", closeModal);
$linkModal.on("click", ".modalCancel", closeModal);
$linkModal.on("click", ".modalBtn", function (e) {
e.target.href = href;
});`
And here is the related CSS:
#linkModal {
background: white;
border: 10px solid black;
bottom: 0;
color: black;
display: none;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
height: 700px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 800px;
overflow: scroll;
}
My question is how can I ensure that the popup window appears centered on the screen based on the user's position on the page, rather than being just centered within the iframe? I apologize if my explanation is unclear, as this is my first post. Usually, I find my answers without needing to post. Any help would be greatly appreciated. Thank you!
EDIT #1: Here is the jsfiddle