Link to home
Start Free TrialLog in
Avatar of Elizabeth2
Elizabeth2Flag for United States of America

asked on

How to make pop-up appear outside iFrame

 I need for a link/button located on a page within an iFrame, to pop-up outside the iframe and over the parent window (holding the iFrame).

Can anyone help me with the code? It needs to work in all browsers, as this is for a client.

Will jQuery do this, or AJAX? I"m working in a CMS with no page extensions, so it will need to work without server-side coding. I can use jQuery/AJAX or JavaScript, or something that can work without page extensions.

Any help is greatly appreciated.

elizabeth ;-)
Avatar of remixedcat
remixedcat
Flag of United States of America image

target: _blank or _top
Avatar of Elizabeth2

ASKER

Yes, thank you, that is working to bring up a new tab, but the client wants a custom pop-up. Every pop-up I've tried so far is appearing within the iFrame. It needs to appear over the parent window.

See the first button (1 of 4 buttons) on the bottom right corner of this page named "Lease Online." Everything in that bottom corner (except the footer) is a page within an iFrame.

This is the parent page:
http://www.thedesignpub.com/755broad/floorplan_final.html

This is the page inside the iFrame that would call the pop-up: http://www.thedesignpub.com/755broad/buttons_1bed_unit_A.html

Thank you for helping.

elizabeth
_parent or _self ???
ASKER CERTIFIED SOLUTION
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
here's a very helpful link for you:
http://www.javascriptkit.com/jsref/window.shtml
Hi Everyone,

A combination of both these suggestions has helped me to find a solution which I am attaching. The only problem with adding the OnClick(window.open) is that the "A HREF" part of the code also needed a URL, and whichever URL I added in that location became the page that was refreshed in the iFrame along with the new pop-up (which is now working - thank you so much). I tried using # in that URL location, but that didn't work, it just popped up a new 2nd window with the page from the iFrame.

 I ended up using the URL of the same page that is supposed to appear in that location (iFrame), and that seems to work. It just refreshes itself.

From the other page suggested, I learned to extend the code a bit by adding the scrollbars= and top=, which in this case were needed, so I thank you all very much.

I really appreciate the help!

elizabeth

<a href="buttons_1bed_unit_A.html" onClick="window.open('popup_lease_online.html','mypage','width=700 height=500 top=10 scrollbars=1')" onmouseout="MM_swapImgRestore();"  onmouseover="MM_swapImage('buttons_1','','files/buttons_1_f2.jpg',1);"><img name="buttons_1" src="files/buttons_1.jpg" width="195" height="43" border="0" id="buttons_1" alt="" /></a>

Open in new window

Avatar of Zyloch
Elizabeth,

To stop the default action of the link, put return false; after the window.open() call in the onclick.
see fixed version.
<a href="#" onClick="window.open('popup_lease_online.html','mypage','width=700 height=500 top=10 scrollbars=1');return false;" onmouseout="MM_swapImgRestore

Open in new window

Awesome! Thank you very much! I really appreciate your help. ;-)
please close question by "Accepting" answer.

Thank you
Sorry for the delay. Thank you very much.