open another web-page in iframe, optimize for appearance

Question

Looking to integrate a calendar scheduling service ( http://calendly.com/ ), which is awesome and allows unauthenticated users to schedule appointments that then go into a Google Calendar.

However I want this all to happen on my site without users leaving.

Calendly doesn't offer this, so the workaround looks like this (click the top "Book it, baby!" button).

I want to do the same thing, but I really don't want to depend on some random javascript framework like fancybox .

What is a way to open a new link in an iframe such that it:

1. Is easily and gracefully exited from
2. Looks great as a new window on top of my site content
3. The content on the foreign page resizes to size of open screen as needed

Thanks all!

Answer 1

<a target="FRAME_NAME" id="showFrame" href="http://example.com">I open in an iframe!</a>

Then use javascript to display a hidden frame when an element with the id showFrame is clicked. You can then style the frame with css to make it fit the screen nicely.