jquery - 如何使用 ShadowBox 在页面加载时打开内联 div？

Question

我想在页面加载时打开一个 div。我粘贴的代码在 ShadowBox 库中给出了一个 JavaScript 错误:“容器未定义”

我怎样才能实现这个目标？

$(document).ready(function () {

    Shadowbox.init({ skipSetup: true }); 
    Shadowbox.open({
        content: '#surveyDialog',
        player: 'inline',
        height: 450,
        width: 500
    });
});


<div id="surveyDialog" class="dialogWindowWrapper">
    <h2>Hello!</h2>
</div>

Answer 1

该错误是由于 Shadowbox 在未准备就绪时打开某些内容而导致的。

对于头部部分，请使用:

<script type="text/javascript">

    Shadowbox.init({
        skipSetup: true
    });

    window.onload = function() {

        Shadowbox.open({
            content: '#surveyDialog',
            player: 'inline',
            height: 450,
            width: 500
        });

    };

</script>

对于正文部分，请使用以下内容:

<div id="surveyDialog" class="dialogWindowWrapper" style="display:none">
    <h2 style="color:#ffffff;">Hello!</h2>
</div>

要立即使用 Shadowbox 示例，请访问 github 上的源页面 here .

编辑:如果您想在页面加载后访问 Shadowbox.open，请查看此处显示的修改后的脚本:

<script type="text/javascript">

    Shadowbox.init({
        skipSetup: true
    });


    function survery01(){
        Shadowbox.open({
            content: '#surveyDialog',
            player: 'inline',
            height: 450,
            width: 500
        });
    }

    window.onload = function() {

        survery01();

    };

</script>

既然 Shadowbox.open 位于命名函数中，您可以在需要时调用它(例如，使用 onclick 属性)。