Как я могу открыть встроенный div для загрузки страницы с помощью ShadowBox?

Question

Я хочу открыть div на загрузку страницы. Код, который я вставлял, дает мне ошибку javascript в библиотеке ShadowBox: «контейнер не определен»

Как я могу достичь этого?

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

EDIT: Если вы хотите получить доступ к 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).