Question

我正在使用colorbox.js来创建模态窗口：

我只需要在页面加载时将名称'colorbox-form'添加到id为#colorbox的元素。

这是触发器的javascript。

$(document).ready(function(){

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

可以在此处找到colorbox.js： http://colorpowered.com/colorbox/#click

这里是装载彩盒时的html：

<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>

Answer 1

这应该可以解决问题：）

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

Answer 2

这会在#colorbox窗口中添加一个自定义类：

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

Answer 3

colorbox插件提供了几个回调函数http://www.jacklmoore.com/colorbox

以下是通过 onOpen 回调添加课程的示例：

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

需要使用jquery将类名添加到colorbox窗口中的元素

3 个答案: