How to make pop-up appear outside iFrame

Elizabeth2
Elizabeth2 used Ask the Experts™
on
 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 ;-)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
target: _blank or _top

Author

Commented:
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 ???
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Senior Developer
Commented:
why cant you just use javascript's new window object?

onClick="window.open('page.html','mypage','width=100 height=200')"
here's a very helpful link for you:
http://www.javascriptkit.com/jsref/window.shtml

Author

Commented:
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

Top Expert 2004

Commented:
Elizabeth,

To stop the default action of the link, put return false; after the window.open() call in the onclick.
Saqib KhanSenior Developer

Commented:
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

Author

Commented:
Awesome! Thank you very much! I really appreciate your help. ;-)
Saqib KhanSenior Developer

Commented:
please close question by "Accepting" answer.

Thank you

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial