SimpleModal -- Open OnLoad

Question

I'm new to JQuery -- not new to javascript.

Was able to open the OSX STYLE DIALOG using the hyperlink button provided in the demo index.html page, but would like to open it on the page load. I read a couple links on StackOverflow (http://stackoverflow.com/questions/1611727/how-do-i-invoke-a-simplemodal-osx-dialog-on-page-load), but still could not get it to work in the exact same index.html page. I finally resorted to a stopgap measure by programmatically invoking the button click of a hidden button element -- see following fragment:

onLoad="document.getElementById('load_OSX_Example').click();">
<input type="hidden" id="load_OSX_Example" value="" class='osx'>

<script type="text/javascript" language="javascript">
    //#### open the OSX Modal  ##########
    $(document).ready(function(){
       $("#osx-modal-content").modal();
    });
</script>

So I have two questions:

1. How can you invoke the class='osx' using javascript/html programmatically?
2. Why won't this work using the $("#osx-modal-content").modal(); call in javascript (see fragment above)? I tried this in multiple browsers, and the only content that displayed on the screen was content of this tag: "div id="osx-modal-title", and there was no error in the jscript console.

Answer 1

For #1:

$(".osx").click();

For #2, here's the script:

<script type="text/javascript" language="javascript">
$(function() {
  $("#osx-modal-content").modal({
    overlayId: 'osx-overlay',
    containerId: 'osx-container',
    closeHTML: '<div class="close"><a href="#" class="simplemodal-close">x</a></div>',
    minHeight:80,
    opacity:65, 
    position:['0',],
    overlayClose:true,
    onOpen:function (d) {
      var self = this;
      self.container = d.container[0];
      d.overlay.fadeIn('slow', function () {
        $("#osx-modal-content", self.container).show();
        var title = $("#osx-modal-title", self.container);
        title.show();
        d.container.slideDown('slow', function () {
          setTimeout(function () {
            var h = $("#osx-modal-data", self.container).height()
              + title.height()
              + 20; // padding
            d.container.animate(
              {height: h}, 
              200,
              function () {
                $("div.close", self.container).show();
                $("#osx-modal-data", self.container).show();
              }
            );
          }, 300);
        });
      })
    },
    onClose:function (d) {
      var self = this;
      d.container.animate(
        {top:"-" + (d.container.height() + 20)},
        500,
        function () {
          self.close(); // or $.modal.close();
        }
      );
    }
  });
});
</script>

Make sure you include the images/CSS included in the sample to get the styling.

Answer 2

Bill,

If you want the dialog to open on page load, there are a couple of options. You can edit the osx.js file directly, or after you've loaded the osx.js file, add the following:

<script type='text/javascript'>
jQuery(function ($) {
    $("#osx-modal-content").modal({
        overlayId: 'osx-overlay',
        containerId: 'osx-container',
        closeHTML: '<div class="close"><a href="#" class="simplemodal-close">x</a></div>',
        minHeight:80,
        opacity:65, 
        position:['0',],
        overlayClose:true,
        onOpen:OSX.open,
        onClose:OSX.close
    });
});
</script>