I have followed the steps, and when it actually pops up, it does not fit the pop up and looks terrible.
Step 1 was to add the following in between the head tags:
<!-- Start of the headers for CoffeeCup Web Form Builder -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://asaltandbuttery.coffeecup.com/forms/abform1/colorbox/colorbox.css" />
<script src="http://asaltandbuttery.coffeecup.com/forms/abform1/common/libs_js/jquery-1.4.4.min.js"></script>
<script src="http://asaltandbuttery.coffeecup.com/forms/abform1/colorbox/jquery.colorbox.js"></script>
<script>
var $fb_pop = jQuery.noConflict();
$fb_pop(document).ready(function(){
setTimeout( function(){ $fb_pop.colorbox({href:"http://asaltandbuttery.coffeecup.com/forms/abform1/", iframe:true, innerWidth:"874px", height:"80%", maxHeight:"634px", fixed:true}) }, 3000 );
// Fallback for Safari browser
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) {
$fb_pop('.fb_iframe').click( function(){
var temp_window = window.open('http://asaltandbuttery.coffeecup.com/forms/abform1/','abform1','width=0,height=0');
window.focus();
setTimeout(function() {temp_window.close();},1000);
} );
}
$fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"874px", height:"80%", maxHeight:"634px", fixed:true });
});
</script>
<!-- End of the headers for CoffeeCup Web Form Builder -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://asaltandbuttery.coffeecup.com/forms/abform1/colorbox/colorbox.css" />
<script src="http://asaltandbuttery.coffeecup.com/forms/abform1/common/libs_js/jquery-1.4.4.min.js"></script>
<script src="http://asaltandbuttery.coffeecup.com/forms/abform1/colorbox/jquery.colorbox.js"></script>
<script>
var $fb_pop = jQuery.noConflict();
$fb_pop(document).ready(function(){
setTimeout( function(){ $fb_pop.colorbox({href:"http://asaltandbuttery.coffeecup.com/forms/abform1/", iframe:true, innerWidth:"874px", height:"80%", maxHeight:"634px", fixed:true}) }, 3000 );
// Fallback for Safari browser
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) {
$fb_pop('.fb_iframe').click( function(){
var temp_window = window.open('http://asaltandbuttery.coffeecup.com/forms/abform1/','abform1','width=0,height=0');
window.focus();
setTimeout(function() {temp_window.close();},1000);
} );
}
$fb_pop(".fb_iframe").colorbox({iframe:true, innerWidth:"874px", height:"80%", maxHeight:"634px", fixed:true });
});
</script>
<!-- End of the headers for CoffeeCup Web Form Builder -->
And Step 2 was to place the following where I'd like for the pop up to appear:
<!-- Start of the body content for CoffeeCup Web Form Builder -->
<a class='fb_iframe' href="http://asaltandbuttery.coffeecup.com/forms/abform1/">Click here</a>
<!-- End of the body content for CoffeeCup Web Form Builder -->
<a class='fb_iframe' href="http://asaltandbuttery.coffeecup.com/forms/abform1/">Click here</a>
<!-- End of the body content for CoffeeCup Web Form Builder -->
Attached is a screenshot of what I'm seeing. Anybody have any idea how to fix this? I have a feeling it's the iframe that is creating this appearance, but am not sure.
