Need to add a class name to an element in colorbox window, using jquery

I'm using colorbox.js to create a modal window:

I just need to add the classname 'colorbox-form' to the element with the id #colorbox when it is loaded on the page.

This is the javascript for the trigger.

$(document).ready(function(){

                 $(".modal").colorbox({width:"50%", inline:true, href:"#inline_contact" });
});

The colorbox.js can be found here: http://colorpowered.com/colorbox/#click

and here's the html for the colorbox when it's loaded:

<div style="padding-bottom: 122px; padding-right: 122px; opacity: 1; cursor: auto; position:     absolute; display: blo开发者_如何转开发ck; width: 669px; height: 435px; top: 700px; left: 436px; " id="colorbox" class="">
<div id="cboxWrapper" style="width: 791px; height: 557px; ">
    <div style="" id="mf0">
        <div id="cboxTopLeft" style="float: left; ">

        </div>
        <div id="cboxTopCenter" style="float: left; width: 669px; ">
        </div>
        <div id="cboxTopRight" style="float: left; ">
        </div>
    </div>
    <div style="clear: left; " id="mf1">
        <div id="cboxMiddleLeft" style="float: left; height: 435px; ">
        </div>
        <div id="cboxContent" style="float: left; width: 669px; height: 435px; ">
            <div id="cboxLoadedContent" style="width: 669px; overflow-x: auto; overflow-y: auto; height: 407px; ">
                <p>content</p></div>
            <div id="cboxLoadingOverlay" style="height: 435px; display: none; " class=""></div>
            <div id="cboxLoadingGraphic" style="height: 435px; display: none; " class=""></div>
            <div id="cboxTitle" style="display: block; " class=""></div>
            <div id="cboxCurrent" style="display: none; " class=""></div>
            <div id="cboxNext" style="display: none; " class=""></div>
            <div id="cboxPrevious" style="display: none; " class=""></div>
            <div id="cboxSlideshow" style="display: none; " class=""></div>
            <div id="cboxClose" style="" class="">close</div></div>
        <div id="cboxMiddleRight" style="float: left; height: 435px; "></div></div>
    <div style="clear: left; " id="mf2"><div id="cboxBottomLeft" style="float: left; "></div>
        <div id="cboxBottomCenter" style="float: left; width: 669px; "></div>
        <div id="cboxBottomRight" style="float: left; "></div>
    </div>
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none; " id="mf3">
</div>
</div>

This should do the trick :)

$(document).ready(function() { 
    $("#colorbox").addClass("colorbox-form"); 
});

This will add a custom class to your #colorbox window:

$('.my-box').colorbox({className: 'my-class'});

The colorbox plugin provides several callback functions http://www.jacklmoore.com/colorbox

Here's a sample of adding a class via the onOpen callback:

$('.js-colorbox').colorbox({
    width: '50%',
    onOpen:function(){
        // add unique class
        $('#colorbox').addClass('cboxLoadedContent-alt');
    },
});