如何使用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>

- Kulvis

---

我不熟悉Shadowbox，但是猜测一下 - 如果你用“skipSetup：true”初始化某些东西，那么也许那就是你的问题？ :) - Nathan

@Nathan，skipSetup 只是防止 ShadowBox 绑定页面中 rel="shadowbox" 的元素的事件。 - VisioN

正如@VisioN所说，这只是为了防止事件绑定。 - Kulvis

我对shadowbox也不熟悉，但例如在fancybox中，我认为内容选项是输入HTML内容而不是IDs。 - Federico Giust

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上此源页面。

更改：如果您想要在页面加载后访问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属性）。

- arttronics

---

感谢。附加示例。干杯！ - arttronics