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

How can you invoke the class='osx' using javascript/html programmatically?
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.

@jmein - Why are you removing vital parts of the question? Please don't edit unless you've read the question, it references the javascript comment you're removing. — Nick Craver, Feb 16 '10 at 15:30
@Nick I was trying to fix the code indention, and I wasnt finished. For some reason having the code block below his question it would not let it be in a code block and I was trying to figure out why. So I just moved it above instead and reflected so in his question — Josh Mein, Feb 16 '10 at 15:33
@jmein - Look a few revisions ago, when below a list, and nothing is between the list and code, 8 space indention is needed...kinda annoying I agree. — Nick Craver, Feb 16 '10 at 15:34

Nick Craver · Answer 1 · 2010-02-16T18:10:42.217

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.

Thanks for the response Nick, #1 one worked. As far as number 2, I have not modified the index.html downloaded as part of the sample (http://www.ericmmartin.com/projects/simplemodal-demos/) -- all I did was add the javascript fragment to open the modal. Must be something else going on here. — Bill Griffith, Feb 16 '10 at 17:13
@Bill - Updated with a merged sample, use that `$(function() {` (same as `$(document).ready(function() {`) to get the modal on load. — Nick Craver, Feb 16 '10 at 18:12
Nick, the second sample you provided worked perfectly in the index.html provided in the sample, thanks. — Bill Griffith, Feb 17 '10 at 13:30

score 0 · Answer 2 · answered Feb 17 '10 at 04:58

0

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>

answered Feb 17 '10 at 04:58

Eric Martin

2,841
2
23
23

Eric, Thanks for your reply. I tried that sample you included above in the index.html of the OSX Sample, however, I kept getting the JS error OSX not defined. I even put the osx.js file into the head, but still got the error. Nick's sample below however, did load the sample -- I really like the way the OSX Dialog works, thanks for making it available.....this is my first foray into JQuery, and I'm going to have to start digging deeper into the way it works. Thanks. – Bill Griffith Feb 17 '10 at 13:35

SimpleModal -- Open OnLoad

2 Answers2

Linked