Open Web page in modal box?

Question

Is this possible? not just html but also a different stylesheet etc while blacking out the rest of the screen?

Thanks for any help.

Ann

Answer 1

Yes, load the data into an iframe. Most modal scripts such as simple modal have this integrated very nicely and only a few options need to be adjusted to make use of it.

Answer 2

You can either use window.showModalDialog(although this may be implemented as a new window) or implement a modal dialog yourself by loading the page in an <iframe> and adding a semi-transparent element whose z-index makes it cover the whole document.

Answer 3

Check out Colorbox (Demo). It is a very well put together plugin for jQuery.

Using iFrames you are able to load pretty much anything into this modal plugin. Here is the example code for the demo w/ the iFrame.

markup

<a class='example7' href="http://google.com">Outside Webpage (Iframe)</a>

JavaScript

$(".example7").colorbox({iframe:true, innerWidth:425, innerHeight:344});

So, you could just change http://google.com to ./your-iFrame.html or whatever and it would load and render that entire page!