如何使用ShadowBox在页面加载时打开内联div？ [英] How can I open inline div on page load using ShadowBox?

问题描述

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

I want to open a div on page load. The code I've pasted gives me a javascript error in the ShadowBox library: 'container is undefined'

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

How can I achieve this?

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

推荐答案

错误是因为Shadowbox在打开时打开了一些东西还没准备好。

The error is a result of having Shadowbox open something when it wasn't ready.

对于头部，请使用：

<script type="text/javascript">

    Shadowbox.init({
        skipSetup: true
    });

    window.onload = function() {

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

    };

</script>

对于正文部分，请使用：

For the body section, use this:

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

对于随时可用的Shadowbox示例，请访问github上的源页面这里。

For ready to use Shadowbox examples, visit the source page on github here.

编辑：如果你想访问页面加载后 Shadowbox.open ，然后查看此处显示的修改过的脚本：

If you wanted to access the Shadowbox.open after the page has loaded, then check out the modified script shown here:

<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 属性）。

Now that Shadowbox.open is in a named function, you can call it when required (e.g., use onclick attribute).

这篇关于如何使用ShadowBox在页面加载时打开内联div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！