CSS popup experiencing issues due to Iframe integration

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

Answer №1

Unfortunately, accessing content from the parent page within an iFrame is not possible, such as screen size, to set values using JavaScript. The CSS on the child page would only apply based on the interpreted "screen size" of the window containing the iFrame.

If your layout was fixed, you could potentially pass the screen size as querystring parameters to the iFrame page.

var $iframe = $("#myIframe");
$iframe.attr("src", "iFrame.html?parentHeight=" + $(window).height() 
                                    + "&parentWidth=" + $(window).width() 
                                    + "&iFrameHeight=" + $iframe.height()
                                    + "&iFrameWidth=" + $iframe.width();

After that, you could perform some calculations when the child page loads to position your modal dialog in the center, but it would still need to be within the iFrame.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I stop json_encode() from including the entire page in the JSON response when submitting a form to the same PHP script?

I only have a single index.php file in my project. I am aware that it's recommended to separate the logic from the view and use different files for PHP, JS, and HTML. This is just a test: <?php if($_SERVER["REQUEST_METHOD"] == "P ...

"What's the best way to update the src attribute of an iFrame when a user clicks

I'm new to coding in PHP or JavaScript, so please bear with me if my question isn't quite right. I'm looking for a way to dynamically pass and embed a URL from a link into the src attribute of an iframe. Essentially, I want users to click o ...

Removing the dollar sign and retaining only the numerical values in an array using JavaScript

Using the code snippet below, I am attempting to retrieve elements by their class name in JavaScript and save them in an array. This is the current output I receive: "I received this output from the initial prices array $30.00, $20.00, $40.00" My inquiry ...

End your Idp session and log out using passport-saml

Encountering a 400 bad request error when attempting to log out a user from the idp session. Despite successfully logging out the user from the application/passport session, they remain logged in to the idp session. The logout and callback endpoints are c ...

Managing the length of a PHP session

As a beginner in web development, I have been trying to figure out how to limit session time in PHP. I have researched on Stackoverflow but haven't found a suitable solution yet. Some suggestions like using cookies, AJAX communication, and static PHP ...

When formatting amounts, it is important to not allow the thousand separator to come after the decimal separator

I am tasked with ensuring that a thousand separator does not come after a decimal separator every time a key is pressed. Is it feasible to achieve this using regular expressions? If so, can you explain how? ...

A concern arises with security when utilizing jQuery alongside json for requesting data from a service

When calling a service with jQuery, there may be concerns about exposing the service call to savvy users who could intercept it using tools like Fiddler or custom web applications. $.ajax({ url: SERVICE_URL?Q1=eee&Q2=sss, dataType: "application/ ...

Need help positioning this HTML iframe on my webpage?

Can anyone help me figure out how to position this HTML i-frame in a specific place on my webpage? <div style="overflow: hidden; width: 333px; height: 156px; position src="h: relative;" id="i_div"><iframe name="i_frame"http://url.com/click.php?a ...

How can I programmatically define the earliest and latest selectable dates in a date picker within Angular 4?

I am currently working on a task to prevent users from selecting past dates on a date picker. I want to set the minimum date available on the date picker to the current date. Below is the code snippet I am using to achieve this: Component.html <input ...

Tips for preventing my component from being duplicated during the development process

I found a helpful guide on creating a JavaScript calendar in React that I am currently following. After implementing the code, I successfully have a functional calendar UI as shown below: // https://medium.com/@nitinpatel_20236/challenge-of-building-a-cal ...

The Next.js middleware, specifically NextRequest.nextUrl.locale, will return an empty string once it is deployed

Encountering a bug in the next-js middleware The middleware function is returning a NextRequest param According to the documentation from Next.js: The NextRequest object is an extension of the native Request interface, with the following added metho ...

Broken image path in the Model-View-Controller framework

When using the jQuery DatePicker plugin in my MVC application, I face an issue with displaying a certain image for the Calendar pop-up. Here is the code snippet: $.datepicker.setDefaults({ showOn: "both", buttonImage: "../images/Calendar.png", ...

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

Tips for personalizing the appearance of a button sourced from a library

Currently, I am utilizing a button from a library called https://www.npmjs.com/package/@react-oauth/google. Although this library offers a custom button feature, I have noticed that it produces a different response. My goal is to adjust the max-width and ...

Struggling with making changes to a instantiated "this" object within a pseudo javascript class

If you scroll down to the bottom of this post, you'll find a workaround or possible solution. I've been grappling with understanding how pseudo classes work together to achieve the task I'm attempting (explained in the code below). It might ...

Python Script for Scanning a Website for a Specific Tag

Currently, I am exploring the process of creating a website monitoring script (which will eventually be set up as a cron job) that can access a specified URL, verify the presence of a specific tag. If the tag is not found or does not contain the expected i ...

Encountering difficulties setting cookies within the app router in Next.js

I've been diving into next.js and I'm trying to figure out how to set a cookie using the code below. However, I'm encountering an error: "Unhandled Runtime Error. Error: Cookies can only be modified in a Server Action or Route Handler." I ...

ngFor returning undefined despite array containing value

While iterating through an array using ngFor, I'm encountering an issue where trying to access data in the 'value' variable results in it being undefined. Why is this happening? myArray = ['a', 'b', 'c', 'd ...

Unable to interact with a button element of type="button" using Selenium, but successful with elements of type

In my attempt to interact with the webpage, I am specifically focusing on this button: <button class="button-text-like marg-l-0 float-l desktop-only remove-button" data-bind="click: $root.removeCartItem" type="button"> <i class="gicon-cross">& ...

Unexpectedly, the NodeJS application experiences a crash following numerous requests

I can't seem to figure out why my Nodejs app crashes after a certain number of requests (currently 22). The issue arises with this simple get request handler: router.get('/api/docs/fetch', async (req,res) => { try{ let docs = ...