I need to embed an iframe on different domain, that when click opens a modal box using fancy box.
It would work something like this.
user clicks image Once click loads a modal box(fancybox) that holds the iframe
I need to do this because the fancybox needs to take up the majority of the screen 960x700
How would I do this?
Something like this should do it. Check out their API for more details on how to use it
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://fancybox.net/js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancybox.net/js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a.iframe").fancybox({
'transitionIn' : 'elastic', //Used for animation, delete if not needed
'transitionOut' : 'elastic', //Used for animation, delete if not needed
'speedIn' : 600, //Used for animation, delete if not needed
'speedOut' : 200, //Used for animation, delete if not needed
'overlayShow' : false, //Used for animation, delete if not needed
'width' : 650, //Set your width
'height' : 500 //Set your height
});
});
</script>
</head>
<body>
<a class="iframe" href="http://www.google.com">Click to open fancy box</a>
</body>
</html>