Search code examples
jquerycolorbox

transparent background for colorbox

I would like to have transparent background for outside of colorbox modal. currently use the css style from this colorbox demo http://www.jacklmoore.com/colorbox/example4/ . based on this answer https://stackoverflow.com/a/2760970/233933, I could do transparent backgournd with:

$(".inline").colorbox({inline:true, width:"30%",
    onOpen: function() {
        // make the overlay visible and re-add all it's original properties!
        $('#cboxOverlay').css({
            'visibility': 'visible', 
            'opacity':0.5, 
            'cursor': 'pointer'
        });
        $('#colorbox').css({ 'visibility': 'visible' }).fadeIn(1000);
    }
});

but I would like to have the transparent style for all my colorbox modals. I tried to edit the colorbox.css file to include:

#cboxOverlay{ visibility: visible; opacity: 0.5 }
#colorbox{ visibility: visible }

but that doesn't change anything. your suggestion?

UPDATED

updated wording so it is clear that I want outside of the modal to be transparent. thanks!

Solution

  • Try:

    #cboxOverlay{ visibility: visible; opacity: 0.5 !important;}

    There are inline styles applied to the overlay that currently override your opacity setting.

    More detailed explanation: there's an inline style attribute being attached to the #cboxOverlay element that says opacity:0.9. This overrides your stylesheet. If you put !important next to your rule, it is not pushed aside in favor of the inline style.