Question

我正在使用colorbox，它在html中创建的按钮上按预期工作。我需要将colorbox触发器放在动态创建的div上，但这会导致#cboxLoadedContent不加载内联内容。
如果我使用在HTML中创建的通用div，则内联打开并显示内容。

以下是我用来弹出框的jquery，区别仅在于＆＃39;触发器＆＃39;格。

    $(".thingsObjects").colorbox({  
            inline:true,  
            width:$(document).width(),   
            height:$(document).height(),   
            onLoad:function() {  
            $('html, body').css('overflow', 'hidden'); // page scrollbars off  
            },   
            onClosed:function() {  
            $('html, body').css('overflow', ''); // page scrollbars on  
            }  
    });

使用动态div是否存在问题？任何指针将不胜感激欢呼声

根据punitdam的要求感谢您的回复，当我将其粘贴到SOverflow中时，H被意外添加。
添加div时会调用以下函数。颜色框打开并覆盖窗口但是空的不同于从头开始添加的.inline。

    function createPopUp(){
    $(".thingsObjects").colorbox({
        inline:true,
        width:$(document).width(), 
        height:$(document).height(), 
        onLoad:function() {
            $('html, body').css('overflow', 'hidden'); // page scrollbars off
        }, 
        onClosed:function() {
            $('html, body').css('overflow', ''); // page scrollbars on
        }
    });        

    $(".inline").colorbox({
        inline:true,
        width:$(document).width(), 
        height:$(document).height(), 
        onLoad:function() {
            $('html, body').css('overflow', 'hidden'); // page scrollbars off
        }, 
        onClosed:function() {
            $('html, body').css('overflow', ''); // page scrollbars on
        }
    });
    $('.popClose').bind('click', function(){
        $.colorbox.close();
    });
}

div的动态创建有点令人沮丧，但主要代码如下

    for (var i = thingAmount; i > 0; i -= 1) { // cycle through and create new thing div
        $(".thingsObjects").prepend('<div class="thingsFront' + ' ' + thingsOptions[nextIndex] + (i) + ' ' + nextMenu +'"></div>');
        var currentThing = ".Shoes" + (i) ; // var to hold changeable div
            $(currentThing).css({'background-image':'url(' + SHOESImageList[i-1] + ')', 'opacity':1 })
                .waitForImages(function() {
            }, function(loaded, count, success) {              
                var img = new Image;
                img.src = $(currentThing).css('background-image').replace(/url\(|\)$/ig, "");
                changePropertiesOfThumbs(howManyMade);
                howManyMade ++;
                if (howManyMade >= thingAmount){
                    repopulationFinished();
                }                        
            }, $.noop, true);           
    }

Answer 1

看起来属性内联你拼错了Hinline。如果您还可以为动态div创建添加代码，那将会非常棒。将Div添加到DOM后，您需要调用colorbox方法。

Answer 2

一旦我创建了一个准系统测试，我发现我忘了用href =“＃inline_content”添加新的div。它适用于我在下面创建的测试但不在我的主站点中。我注意到，对于每个colorbox调用，一个新的类cboxElement被添加到div我猜这是问题，因为在我的代码上面cboxElement没有添加到我的动态div中。

这是一个工作测试可能会用于某些人，它不能解决我的情况，但也可能是其他人。

再次感谢你的时间惩罚。

    <html>
<head>
    <meta charset='utf-8'/>
    <title>Colorbox Inline</title>

    <script type="text/javascript" src="scripts/core/jquery-1.11.0.min.js"></script>

    <link rel="stylesheet" href="css/colorbox.css" />
    <script src="scripts/core/jquery.colorbox-min.js"></script>



    <script>
        $(document).ready(function(){
            $(".inline").colorbox({
                inline:true,
                width:$(document).width(), 
                height:$(document).height(), 
                onLoad:function() {
                    $('html, body').css('overflow', 'hidden'); // page scrollbars off
                }, 
                onClosed:function() {
                    $('html, body').css('overflow', ''); // page scrollbars on
                }
            });

            $('.popClose').bind('click', function(){
                $.colorbox.close();
            });

        $(".testBtn").prepend('<div class="dynamicTest" href="#inline_content">NEW TEST BTN</div>');

            $(".dynamicTest").colorbox({
                inline:true,
                width:$(document).width(), 
                height:$(document).height(), 
                onLoad:function() {
                    $('html, body').css('overflow', 'hidden'); // page scrollbars off
                }, 
                onClosed:function() {
                    $('html, body').css('overflow', ''); // page scrollbars on
                }
            });                
        });
    </script>
</head>
<body>

    <p><a class='inline' href="#inline_content">Inline HTML</a></p>

    <div class="testBtn">TESTER</div>

    <div style='display:none'>
        <div id='inline_content' style='padding:10px; background:#fff;'>
            <div id="pop">
                TEST CONTENT !
            </div> 
        </div>

    </div>
</body>

当点击与动态创建的div相关联时，打开内联div的Jquery Colorbox问题

2 个答案: