Jquery simple modal dialog with iframe and generated elements

Question

Ok, guys, I need your help. My English is not so good, so I hope that you'll understand what I want.

I need some very simple modal dialog that will be generated only through JavaScript or Jquery. In that modal I will have some iframe. Modal and iframe in it must be generated via JavaScript or Jquery, because I need just some code in <script> and <a> link in body to call that js or jquery code and generate modal with iframe in it.

If there is need for CSS to create modal and iframe in it, CSS will be created via that code too. Client will put those <script> and <a> tags on his site and then will on click get modal with iframe. In iframe will be content of my own site. I need that for ads, like Google Ads.

P.S. I know how to create iframe through JavaScript, so basically I need that modal dialog to complete code. I can do that without modal dialog, using popups, but I need better solution.

Any suggestions? Thank you.

Answer 1

Use Colorbox. It will allow you to iframe content, and all you use are <a> tags. Super simple, 100% customizable. I use it for a lot of my client work. On the example page you will see an example of iFramed content. If you view the source, you will see the following usage:

$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
...
<p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p>

A <script> and <a> tag.

The css is not generated via the code, however, you could easily add a line as part of the script to do this in jQuery which gets called after the modal's load:

$('cboxOverlay').css({ background: '#fff' });
// etc ..