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

问题描述

|| 我正在使用

colorBox.js

创建模式窗口： 我只需要在加载到页面上的ID为#colorBox的元素上添加类名\'colorBox-form \'。 这是触发器的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>

    

解决方法

        这应该可以解决问题：)

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

    ,        这会将自定义类添加到您的#colorbox窗口中：

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

    ,        colorbox插件提供了几个回调函数http://www.jacklmoore.com/colorbox 这是通过onOpen回调添加类的示例：

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