How to display modal window to overlapping the iframe? - javascript

Am trying to display a file in a modal window when a button in an iframe is clicked. The iframe is present in a main window and an iframe is also there where we have kept a button to view the file in a modal window.
The modal window is working fine, but it opens in the iframe itself, but i want that to come out of the iframe and get displayed as a modal window.
HTML and Javascript for the view button where the modal window is called in onClick()
<span class="btn" title='hh' onClick="window.parent.showModal('../sales_stock/stockForm.php',1160,600);">Add New Stock Statement</span>
the show modal function is responsible for poping up the modal window.
I want to know what i should do to make the modal window pop out of the iframe.

If your iframe content from the same domain as you page you can subscribe to the click event from the main page and show popup from the main page. You can't overlap iframe borders from inside.
On the main page:
$("#myframe").contents().find("#button-inside-of-iframe").click(function(){
$('#mypopup').show();
});

Related

JavaScript - How to set focus to the Popup window

In JavaScript is there an option to point focus to an already opened Popup window?
Scenario:
In a web page, I click on a link in webpage1 to open a popup window. Now I want to fill up few details in the popup window using JavaScript followed by save and close the popup window.

Modal position changes depending on trigger location

I am building a web widget that opens a modal window. The window opens as expected when the trigger link is at the top of the page. But when the trigger is at the bottom of a long page (that requires scrolling), the modal window is clipped/truncated above the viewing area.
Regardless of where the modal window is triggered, the HTML is appended to the body of the page, so I don't understand what's causing the issue.
I would appreciate some help.
js code: https://textfilter.me/widget.js
example / demo : https://textfilter.me/privacy/
It's not javascript. It's css. In this case change position:absolute to position: fixed in modal class. voila.

Show modal above iframe when iframe is in fullscreen mode

I have an HTML page with an Iframe inside. I need to show the iframe in Fullscreen mode, and when I'm in such mode I need to show some Modal dialogs which are placed within the "base" HTML page.
As a solution I tried to dinamically append the dialog to the iframe's body. The modal shows, but the actions aren't executed (button clicks, etc.). I'd like to avoid, if possible, to recreated the event listeners each time I've to show a modal dialog.
Anyone with the same problem?

How to open Javascript popup from iframe window to parent window

I am working in jsp with javascript . Here i have use the iframe inside parent window. When i cliclk the button in iframe page the popup window will be opened inside iframe page. But i want to show the popup in parent window ? anybody help me.
Iframe look like in parent window:
USE:
myFrame.contentWindow.open()

How can I get number of child windows for a browser

I have one icon (say open) in home page. When I click on this icon one child window will be open and the icon in that home page is also changed to 'close icon'. When close this popup window the icon should be same as previous icon (i.e. open icon) in home page. It's working fine when I stay on the same page.
But when redirecting from home page to next page the entire page gets reloaded. And the default image (open icon) is displaying even if the popup window is opened.
Now my requirement is:
At the time of page redirection the image should be loaded based upon the popup window. i.e. if popup window is open it should display the close icon otherwise it display open icon.
If page is refreshed or redirecting to another page the reference of the popup window is removed. then how can I get the reference of that popup window in a redirecting page.
How to count the number of child windows for a browser
EDIT:
I have tried the following solutions:
I set cookie at the time of opening a popup window and reset that cookie whenever I have closed that popup window. But the problem is, at the time of page redirection if I close the popup window the cookie is not reset to it's previous value, because the page is still in processing.
same problem with the session variable also
Please help me.
Set a cookie or a session variable when you open and close. This way you can remember the state of your popup window during new requests
When you go from one page to the next, you lose the reference to the pop-up window. But the pop-up window doesn't lose its reference to the main window. window.opener will always point to the window that opened it, even when there's a page change. Use this fact to reestablish communication between the windows after a navigation event. You might need to use an interval function to probe the main window, as I don't think you can listen for an event.

Categories