I'd like to change the overlay and opacity of a fancy box in the code below. I tried to add these lines based on JFK's suggestions but unfortunately it is not working:

   <script type="text/javascript">
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

</script>

just after the opening script tag but without success. Any thoughts? Thanks

My full code now:

    <script type="text/javascript">
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

function openFancybox() {
    setTimeout( function() {$('#various1').trigger('click'); },2000);

}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 1 });
    $('#various1').fancybox();

});
</script>

Within body tags:

<div id="various1" style="display:none;">
<h2>Wele to our website!</h2>
</div>

I'd like to change the overlay and opacity of a fancy box in the code below. I tried to add these lines based on JFK's suggestions but unfortunately it is not working:

   <script type="text/javascript">
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

</script>

just after the opening script tag but without success. Any thoughts? Thanks

My full code now:

    <script type="text/javascript">
$(".fancybox").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

function openFancybox() {
    setTimeout( function() {$('#various1').trigger('click'); },2000);

}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 1 });
    $('#various1').fancybox();

});
</script>

Within body tags:

<div id="various1" style="display:none;">
<h2>Wele to our website!</h2>
</div>

• javascript
• jquery
• fancybox
• fancybox-2

• Take a look here: stackoverflow./questions/9740443/… – Irvin Dominin Commented Jun 8, 2013 at 22:02
• What selector are you actually using to fire fancybox : .fancybox or various1? because whatever it is, you have to apply your options to the script that binds fancybox to that selector. BTW, fancybox v2.x API options are new and not patible with previous versions ... overlayOpacity is an option for v1.3.4. Check the docs for the right options you should be using fancyapps./fancybox/#docs – JFK Commented Jun 8, 2013 at 22:04
• @Edward : unfortunately that post is outdated and valid for v2.0.x but not for v2.1.x .... se my answer for the new supported format. – JFK Commented Jun 8, 2013 at 22:15

3 Answers 3

Fancybox v2.x options are new and not patible with previous versions ... for instance overlayOpacity and overlayColor are options for fancybox v1.3.4 and won't work with version 2.

Check fancybox v2.x documentation for the right options you should be using.

To change color and opacity in fancybox 2, you should use this format (v2.1.4 as today) :

$("#various1").fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

...where the last of the 4 numbers is the selected opacity (EDIT : the code above matches the OP's selector)

Check JSFIDDLE

IMPORTANT : IE[6/7/8] doesn't support rgba .... check this article for further reference.

Just put your code in

$(function(){
//your code here
})

Try

#fancybox-overlay {
  width: 100%;
}