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>
The error is a result of having Shadowbox open something when it wasn't ready.
For the head section, use this:
<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>
For ready to use Shadowbox examples, visit the source page on github here.
EDIT: 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>
Now that Shadowbox.open
is in a named function, you can call it when required (e.g., use onclick
attribute).