Geek asks and answers

You must add the class name to the element in the colorbox window using jquery

I use colorbox.jsto create a modal window:

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

This is javascript for the trigger.

$(document).ready(function(){

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

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

and here is the html for colorbox on load:

<div style="padding-bottom: 122px; padding-right: 122px; opacity: 1; cursor: auto; position:     absolute; display: block; 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>
+3
source share
3 answers

That should do the trick :)

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

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

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

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

Here is an example of adding a class via the onOpen callback :

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

More articles:


All Articles