How do I invoke a SimpleModal OSX dialog on page load?

Question

I was wondering if there is a way to invoke the SimpleModal OSX dialog box on page load? I tried http://stackoverflow.com/questions/522864/open-jquery-modal-dialog-on-page-load but wasn't able to make it happen.

Currently, the dialog is invoked on clicking a button / link. I would like to invoke it on page load.

Please help. :)

Thanks!

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/osx.js'></script>

<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>

<div id="osx-modal-content">
  <div id="osx-modal-data">
    <h2>Hello! I'm SimpleModal!</h2>
    <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
  </div>
</div>

Answer 1

This part taken from the question you referenced should do the trick:

$(document).ready(function(){
    $("#osx-modal-content").modal();
});

The .ready() function is invoked just after the DOM has loaded. If this doesn't work but clicking on your button works I can only guess that some part of the code hasn't loaded yet that is essential for a dialog.

Try looking at the errors you get from your javascript. All modern browsers let you do that.

Answer 2

Is there a way to create two of these on one page??

Answer 3

You should add that code into osx.js script in this part:

        $(document).ready(function() {

            $("#osx-modal-content").modal({
                overlayId: 'osx-overlay',
                containerId: 'osx-container',